{"id":11842,"library":"react-responsive-carousel","title":"React Responsive Carousel","description":"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.","status":"maintenance","version":"3.2.23","language":"javascript","source_language":"en","source_url":"https://github.com/leandrowd/react-responsive-carousel","tags":["javascript","react","carousel","gallery","image-gallery","slider","responsive","swipe","mobile-friendly","typescript"],"install":[{"cmd":"npm install react-responsive-carousel","lang":"bash","label":"npm"},{"cmd":"yarn add react-responsive-carousel","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-responsive-carousel","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary component for rendering carousels. Use named import syntax.","wrong":"const Carousel = require('react-responsive-carousel').Carousel;","symbol":"Carousel","correct":"import { Carousel } from 'react-responsive-carousel';"},{"note":"Crucial for applying default styling. Must be imported as a side effect. Often placed early in the application or component file.","wrong":"require('react-responsive-carousel/lib/styles/carousel.min.css');","symbol":"styles","correct":"import \"react-responsive-carousel/lib/styles/carousel.min.css\";"},{"note":"Import types for enhanced developer experience in TypeScript projects. The library ships its own type definitions.","symbol":"CarouselProps","correct":"import type { CarouselProps } from 'react-responsive-carousel';"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // mandatory styles\nimport { Carousel } from 'react-responsive-carousel';\n\nclass DemoCarousel extends Component {\n    render() {\n        return (\n            <Carousel>\n                <div>\n                    <img src=\"https://via.placeholder.com/600x400?text=Image+1\" alt=\"Legend 1\" />\n                    <p className=\"legend\">Legend 1</p>\n                </div>\n                <div>\n                    <img src=\"https://via.placeholder.com/600x400?text=Image+2\" alt=\"Legend 2\" />\n                    <p className=\"legend\">Legend 2</p>\n                </div>\n                <div>\n                    <img src=\"https://via.placeholder.com/600x400?text=Image+3\" alt=\"Legend 3\" />\n                    <p className=\"legend\">Legend 3</p>\n                </div>\n            </Carousel>\n        );\n    }\n}\n\n// Assuming a div with class 'demo-carousel' exists in your HTML\nReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));","lang":"javascript","description":"Demonstrates basic usage of the Carousel component with three image slides and associated legends, including the mandatory CSS import."},"warnings":[{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.2"},{"fix":"Ensure your project uses React 0.14 or newer. If IE8 support is required, you must use version 0.1.6 or older.","message":"Version 2.0.0 updated React to 0.14.2 and officially dropped support for Internet Explorer 8 (IE8).","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import { Carousel } from 'react-responsive-carousel';` at the top of your file.","cause":"The Carousel component was not imported or was imported incorrectly.","error":"Carousel is not defined"},{"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.","cause":"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`.","error":"Module not found: Error: Can't resolve 'react-responsive-carousel/lib/styles/carousel.min.css'"},{"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.","cause":"Often occurs when children passed to `Carousel` are not valid React elements or are `undefined`/`null`, leading to rendering issues.","error":"TypeError: Cannot read properties of undefined (reading 'length') when rendering Carousel."}],"ecosystem":"npm"}