{"id":15220,"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.","status":"maintenance","version":"0.14.1","language":"javascript","source_language":"en","source_url":"https://github.com/oliviertassinari/react-swipeable-views","tags":["javascript"],"install":[{"cmd":"npm install react-swipeable-views-utils","lang":"bash","label":"npm"},{"cmd":"yarn add react-swipeable-views-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-swipeable-views-utils","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all React components.","package":"react","optional":false},{"reason":"Core dependency for which these utilities are designed.","package":"react-swipeable-views","optional":false}],"imports":[{"note":"HOC for adding automatic slide progression. Typically used to wrap `SwipeableViews`.","wrong":"const autoPlay = require('react-swipeable-views-utils').autoPlay;","symbol":"autoPlay","correct":"import { autoPlay } from 'react-swipeable-views-utils';"},{"note":"HOC for rendering only visible slides, improving performance for large numbers of views. Requires a `slideRenderer` prop.","wrong":"import virtualize from 'react-swipeable-views-utils/lib/virtualize';","symbol":"virtualize","correct":"import { virtualize } from 'react-swipeable-views-utils';"},{"note":"HOC to enable keyboard left/right arrow navigation. Ensure the wrapped component is focusable or a suitable element is given focus.","wrong":"import { BindKeyboard } from 'react-swipeable-views-utils';","symbol":"bindKeyboard","correct":"import { bindKeyboard } from 'react-swipeable-views-utils';"}],"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."},"warnings":[{"fix":"Update `react-swipeable-views` and refactor any legacy context usage to React's new Context API or ensure HOCs are correctly composed.","message":"The package removed legacy context, which might affect applications relying on older React context APIs. Ensure your `react-swipeable-views` setup does not use deprecated context features.","severity":"breaking","affected_versions":">=0.14.0"},{"fix":"Upgrade your project's React dependency to `^16.3.0` or higher to ensure compatibility.","message":"Version `0.14.0-alpha.0` introduced a minimum React version requirement of `16.3` due to its use of `UNSAFE_*` lifecycle methods (`componentWillReceiveProps`, `componentWillMount`) to workaround console warnings. Using older React versions will lead to errors or warnings.","severity":"breaking","affected_versions":">=0.14.0-alpha.0"},{"fix":"Upgrade to `0.14.0` or later to ensure the `onChangeIndex` callback receives all expected parameters.","message":"When using the `autoPlay` HOC, the `onChangeIndex` prop's third parameter was previously swallowed in certain cases. This was fixed, but ensure your `onChangeIndex` callback correctly handles its arguments if you experienced unexpected behavior.","severity":"gotcha","affected_versions":"<0.14.0"},{"fix":"Add `enableMouseEvents` prop to your `SwipeableViews` component: `<SwipeableViews enableMouseEvents={true} />`.","message":"For mouse events to work with `react-swipeable-views` (and thus with these utilities), you might need to explicitly add the `enableMouseEvents` prop to your `SwipeableViews` component. This is not always intuitive for users expecting touch and mouse parity.","severity":"gotcha","affected_versions":">=0.13.3"},{"fix":"No direct fix if you require background autoplay, as this is intended behavior. Consider implementing custom interval logic if this is a critical requirement.","message":"The `autoplay` HOC pauses when the window is hidden. While this is often desired to save resources, it can be a 'gotcha' if you expect continuous autoplay even when the tab is in the background.","severity":"gotcha","affected_versions":">=0.13.3"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure both `react` and `react-swipeable-views` are at `^16.3.0` or higher, and `react-swipeable-views-utils` is at `0.14.0` or later.","cause":"Using `react-swipeable-views-utils` versions `>=0.14.0-alpha.0` with React < 16.3, or an older `react-swipeable-views` with a newer React.","error":"Error: `SwipeableViews` does not support `componentWillReceiveProps` or `componentWillMount` on React 16.3+."},{"fix":"Upgrade to `0.14.0` or later, which includes fixes for `scrollTop` and issues with portals inside views. Ensure your `SwipeableViews` component is rendered in a standard DOM flow.","cause":"This error can occur if `scrollTop` is not handled correctly in some environments, or if a view portal is used incorrectly, preventing proper DOM manipulation.","error":"TypeError: Cannot read properties of undefined (reading 'scrollTo')"},{"fix":"Ensure `react-swipeable-views` and `react-swipeable-views-utils` are on their latest versions (`0.14.x`) which should address `prop-types` usage correctly.","cause":"Older versions of `react-swipeable-views` or its utilities might still rely on `React.PropTypes` directly.","error":"Warning: Accessing PropTypes via the main 'react' package is deprecated. Use the 'prop-types' package instead."}],"ecosystem":"npm"}