{"library":"react-swipeable-views-utils","title":"React Swipeable Views Utilities","description":"react-swipeable-views-utils provides Higher-Order Components (HOCs) and utilities designed to extend the functionality of `react-swipeable-views`. This package offers features like automatic slide progression (`autoPlay`), virtualized rendering for performance with many slides (`virtualize`), and keyboard navigation (`bindKeyboard`). The current stable version is `0.14.1`. Historically, releases have been somewhat irregular, with the last significant update over a year ago, suggesting a maintenance rather than active development phase. Its primary differentiator is its tight integration with `react-swipeable-views`, providing common advanced behaviors out-of-the-box without requiring complex custom implementations. It relies on React's HOC pattern to inject enhanced behavior into a base `SwipeableViews` component.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-swipeable-views-utils"],"cli":null},"imports":["import { autoPlay } from 'react-swipeable-views-utils';","import { virtualize } from 'react-swipeable-views-utils';","import { bindKeyboard } from 'react-swipeable-views-utils';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as React from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { autoPlay } from 'react-swipeable-views-utils';\n\nconst AutoPlaySwipeableViews = autoPlay(SwipeableViews);\n\nconst DemoCarousel = () => {\n  const [index, setIndex] = React.useState(0);\n\n  const handleChangeIndex = (idx) => {\n    setIndex(idx);\n  };\n\n  return (\n    <div style={{ maxWidth: 400, margin: 'auto' }}>\n      <h2>Auto-Playing Carousel</h2>\n      <AutoPlaySwipeableViews\n        index={index}\n        onChangeIndex={handleChangeIndex}\n        enableMouseEvents\n        interval={3000}\n      >\n        <div style={{ background: '#f44336', height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n          <h3>Slide 1</h3>\n        </div>\n        <div style={{ background: '#2196f3', height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n          <h3>Slide 2</h3>\n        </div>\n        <div style={{ background: '#4caf50', height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n          <h3>Slide 3</h3>\n        </div>\n      </AutoPlaySwipeableViews>\n      <div style={{ textAlign: 'center', marginTop: 10 }}>\n        {['●', '●', '●'].map((dot, i) => (\n          <span\n            key={i}\n            style={{\n              cursor: 'pointer',\n              margin: '0 5px',\n              color: i === index ? '#333' : '#bbb',\n              fontSize: '24px'\n            }}\n            onClick={() => setIndex(i)}\n          >\n            {dot}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default DemoCarousel;\n","lang":"typescript","description":"This quickstart demonstrates how to use the `autoPlay` HOC with `react-swipeable-views` to create a self-advancing carousel, including basic navigation dots.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}