Registry /
web-framework / react-swipeable-views-utils
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
autoPlay
✓ import { autoPlay } from 'react-swipeable-views-utils';
✗ const autoPlay = require('react-swipeable-views-utils').autoPlay;
HOC for adding automatic slide progression. Typically used to wrap `SwipeableViews`.
virtualize
✓ import { virtualize } from 'react-swipeable-views-utils';
✗ import virtualize from 'react-swipeable-views-utils/lib/virtualize';
HOC for rendering only visible slides, improving performance for large numbers of views. Requires a `slideRenderer` prop.
bindKeyboard
✓ import { bindKeyboard } from 'react-swipeable-views-utils';
✗ import { BindKeyboard } from 'react-swipeable-views-utils';
HOC to enable keyboard left/right arrow navigation. Ensure the wrapped component is focusable or a suitable element is given focus.
This quickstart demonstrates how to use the `autoPlay` HOC with `react-swipeable-views` to create a self-advancing carousel, including basic navigation dots.
import * as React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const DemoCarousel = () => {
const [index, setIndex] = React.useState(0);
const handleChangeIndex = (idx) => {
setIndex(idx);
};
return (
<div style={{ maxWidth: 400, margin: 'auto' }}>
<h2>Auto-Playing Carousel</h2>
<AutoPlaySwipeableViews
index={index}
onChangeIndex={handleChangeIndex}
enableMouseEvents
interval={3000}
>
<div style={{ background: '#f44336', height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<h3>Slide 1</h3>
</div>
<div style={{ background: '#2196f3', height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<h3>Slide 2</h3>
</div>
<div style={{ background: '#4caf50', height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<h3>Slide 3</h3>
</div>
</AutoPlaySwipeableViews>
<div style={{ textAlign: 'center', marginTop: 10 }}>
{['●', '●', '●'].map((dot, i) => (
<span
key={i}
style={{
cursor: 'pointer',
margin: '0 5px',
color: i === index ? '#333' : '#bbb',
fontSize: '24px'
}}
onClick={() => setIndex(i)}
>
{dot}
</span>
))}
</div>
</div>
);
};
export default DemoCarousel;
Debug
Known issues
breakingThe 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.fixUpdate `react-swipeable-views` and refactor any legacy context usage to React's new Context API or ensure HOCs are correctly composed.
affects: >=0.14.0
breakingVersion `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.fixUpgrade your project's React dependency to `^16.3.0` or higher to ensure compatibility.
affects: >=0.14.0-alpha.0
gotchaWhen 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.fixUpgrade to `0.14.0` or later to ensure the `onChangeIndex` callback receives all expected parameters.
affects: <0.14.0
gotchaFor 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.fixAdd `enableMouseEvents` prop to your `SwipeableViews` component: `<SwipeableViews enableMouseEvents={true} />`. affects: >=0.13.3
gotchaThe `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.fixNo direct fix if you require background autoplay, as this is intended behavior. Consider implementing custom interval logic if this is a critical requirement.
affects: >=0.13.3
Errors
Common errors & fixes
Error: `SwipeableViews` does not support `componentWillReceiveProps` or `componentWillMount` on React 16.3+.
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.
fixEnsure 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.
TypeError: Cannot read properties of undefined (reading 'scrollTo')
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.
fixUpgrade 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.
Warning: Accessing PropTypes via the main 'react' package is deprecated. Use the 'prop-types' package instead.
Older versions of `react-swipeable-views` or its utilities might still rely on `React.PropTypes` directly.
fixEnsure `react-swipeable-views` and `react-swipeable-views-utils` are on their latest versions (`0.14.x`) which should address `prop-types` usage correctly.
Audit
Dependencies
reactrequiredPeer dependency required for all React components.
react-swipeable-viewsrequiredCore dependency for which these utilities are designed.