{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-responsive-carousel"],"cli":null},"imports":["import { Carousel } from 'react-responsive-carousel';","import \"react-responsive-carousel/lib/styles/carousel.min.css\";","import type { CarouselProps } from 'react-responsive-carousel';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}