Registry / web-framework / react-responsive-carousel

react-responsive-carousel

library3.2.23jsnpmunverified

React Responsive Carousel is a powerful and highly customizable carousel component for React applications, currently at version 3.2.23. It offers responsive design, mobile-friendly swipe gestures, server-side rendering compatibility, and keyboard navigation. Developers can customize animation duration, enable auto-play with custom intervals, and configure infinite loops in both horizontal and vertical directions. A key differentiator is its flexibility, supporting various content types like images, videos, and text as direct children, along with extensive customization options for thumbs, arrows, indicators, status displays, and animation handlers. However, the package is currently in a maintenance-only state, as the primary maintainer lacks time for active development. New features are not being added, though safe pull requests might be merged occasionally, implying an infrequent release cadence focused primarily on stability rather than feature expansion.

web-framework

npm install react-responsive-carousel

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-RESPONSIVE-C

react-responsive-carousel

web-frameworkjavascriptv3.2.23

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Carousel

✓ import { Carousel } from 'react-responsive-carousel';

✗ const Carousel = require('react-responsive-carousel').Carousel;

The primary component for rendering carousels. Use named import syntax.

styles

✓ import "react-responsive-carousel/lib/styles/carousel.min.css";

✗ require('react-responsive-carousel/lib/styles/carousel.min.css');

Crucial for applying default styling. Must be imported as a side effect. Often placed early in the application or component file.

CarouselProps

✓ import type { CarouselProps } from 'react-responsive-carousel';

Import types for enhanced developer experience in TypeScript projects. The library ships its own type definitions.

Demonstrates basic usage of the Carousel component with three image slides and associated legends, including the mandatory CSS import.

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import "react-responsive-carousel/lib/styles/carousel.min.css"; // mandatory styles import { Carousel } from 'react-responsive-carousel'; class DemoCarousel extends Component { render() { return ( <Carousel> <div> <img src="https://via.placeholder.com/600x400?text=Image+1" alt="Legend 1" /> <p className="legend">Legend 1</p> </div> <div> <img src="https://via.placeholder.com/600x400?text=Image+2" alt="Legend 2" /> <p className="legend">Legend 2</p> </div> <div> <img src="https://via.placeholder.com/600x400?text=Image+3" alt="Legend 3" /> <p className="legend">Legend 3</p> </div> </Carousel> ); } } // Assuming a div with class 'demo-carousel' exists in your HTML ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

Debug

Known issues

gotchaThe package is in maintenance mode. The primary maintainer does not have time for active development, meaning new features are unlikely, and critical bug fixes may have delayed timelines. Consider forking or contributing if you require active development.

fix

Be aware of the maintenance status for long-term project planning. Evaluate community forks or alternative carousel libraries if active development and immediate support are critical.

affects: >=3.0.0

breakingVersion 3.0.2 introduced significant changes, including adding support for free children, vertical carousels, free legends, and updating ref callbacks. Callback names were also renamed, potentially breaking existing implementations.

fix

Review the changelog and usage examples for v3.0.2 to adapt to the new API, especially concerning children rendering and callback names. Migrate to the new 'free children' model if applicable.

affects: >=3.0.2

breakingVersion 2.0.0 updated React to 0.14.2 and officially dropped support for Internet Explorer 8 (IE8).

fix

Ensure your project uses React 0.14 or newer. If IE8 support is required, you must use version 0.1.6 or older.

affects: >=2.0.0

gotchaThe carousel styles are not automatically included and must be imported explicitly in your application. Forgetting to do so will result in an unstyled and potentially non-functional carousel.

fix

Add `import "react-responsive-carousel/lib/styles/carousel.min.css";` to your entry file or the component where `Carousel` is used. Ensure your build system (e.g., Webpack, Parcel) is configured to handle CSS imports.

affects: >=0.1.0

Errors

Common errors & fixes

Carousel is not defined

The Carousel component was not imported or was imported incorrectly.

fix

Ensure you have `import { Carousel } from 'react-responsive-carousel';` at the top of your file.

Module not found: Error: Can't resolve 'react-responsive-carousel/lib/styles/carousel.min.css'

The path to the CSS file is incorrect, or your build tool (e.g., Webpack, Vite) is not configured to process CSS imports from `node_modules`.

fix

Verify the import path `import "react-responsive-carousel/lib/styles/carousel.min.css";`. If using a bundler, ensure you have appropriate loaders (e.g., `css-loader`, `style-loader` for Webpack) configured in your build setup.

TypeError: Cannot read properties of undefined (reading 'length') when rendering Carousel.

Often occurs when children passed to `Carousel` are not valid React elements or are `undefined`/`null`, leading to rendering issues.

fix

Ensure that all direct children passed to the `Carousel` component are valid React elements (e.g., `<div>`, `<img>`, custom components) and that there are no `null` or `undefined` values in the children array if dynamically rendered.

Upgrade

Version history

3.2.23latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/leandrowd/react-responsive-carousel ↗

packagehttps://www.npmjs.com/package/react-responsive-carousel ↗

homepagehttps://leandrowd.github.io/react-responsive-carousel/ ↗