{"library":"react-touch-carousel","title":"Highly Customizable React Touch Carousel","description":"react-touch-carousel is a micro carousel framework for React.JS that prioritizes highly customizable user experiences over predefined configurations. Instead of offering numerous options for static DOM nodes, it employs an inversion of control pattern, allowing developers to fully dictate content rendering and styling dynamically. Its current stable version is 0.10.2, and releases appear tied to updates in its underlying animation library, `react-spring`, rather than a fixed cadence. This differentiates it significantly from more opinionated carousel libraries like Swiper or Slick, providing unparalleled flexibility for bespoke designs and advanced UI requirements where designers demand specific, non-standard behaviors.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-touch-carousel"],"cli":null},"imports":["import TouchCarousel from 'react-touch-carousel';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import TouchCarousel from 'react-touch-carousel';\nimport React, { useRef } from 'react';\n\nconst listOfData = [\n  { id: 1, title: 'Slide A', color: '#ffadad' },\n  { id: 2, title: 'Slide B', color: '#ffd6a5' },\n  { id: 3, title: 'Slide C', color: '#fdffb6' },\n  { id: 4, title: 'Slide D', color: '#caffbf' },\n  { id: 5, title: 'Slide E', color: '#9bf6ff' }\n];\n\nfunction CarouselContainer({ cursor, carouselState, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, children }) {\n  const containerRef = useRef();\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: '100%',\n        maxWidth: '500px',\n        height: '250px',\n        overflow: 'hidden',\n        position: 'relative',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        border: '1px solid #eee',\n        margin: '20px auto'\n      }}\n      onTouchStart={onTouchStart}\n      onTouchMove={onTouchMove}\n      onTouchEnd={onTouchEnd}\n      onTouchCancel={onTouchCancel}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction renderCard(index, modIndex, cursor) {\n  const item = listOfData[modIndex];\n  const translateX = (index - cursor) * 375; // Assuming cardSize 375px\n  return (\n    <div\n      key={item.id}\n      style={{\n        position: 'absolute',\n        transform: `translateX(${translateX}px)`,\n        width: '350px',\n        height: '180px',\n        backgroundColor: item.color,\n        borderRadius: '12px',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fontSize: '1.8em',\n        color: 'white',\n        boxShadow: '0 6px 12px rgba(0,0,0,0.2)',\n        transition: 'transform 0.3s ease-out'\n      }}\n    >\n      {item.title}\n    </div>\n  );\n}\n\n// To render this in a React application:\n// export default function App() {\n//   return (\n//     <TouchCarousel\n//       component={CarouselContainer}\n//       cardCount={listOfData.length}\n//       cardSize={375}\n//       renderCard={renderCard}\n//       loop\n//       autoplay={3000}\n//       defaultCursor={0}\n//       onRest={(idx, modIdx) => console.log(`Carousel rested at index: ${idx}, modIndex: ${modIdx}`)}\n//     />\n//   );\n// }","lang":"javascript","description":"This quickstart demonstrates a basic looping carousel with autoplay functionality. It shows how to provide a custom container component and a card renderer, leveraging `listOfData` to dynamically display content with custom styling and animations via inline styles and `transform` properties.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}