Registry / react-swipeable-views-utils-react-18-fix
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-react-18-fix';
✗ const autoPlay = require('react-swipeable-views-utils-react-18-fix').autoPlay;
Imports the autoPlay Higher-Order Component. This package primarily uses named exports. While HOCs are the pattern here, modern React often favors hooks for similar logic concerns.
virtualize
✓ import { virtualize } from 'react-swipeable-views-utils-react-18-fix';
✗ import virtualize from 'react-swipeable-views-utils-react-18-fix/lib/virtualize';
Imports the virtualize HOC for handling large lists of slides efficiently. Avoid direct deep imports as they can change without notice.
bindKeyboard
✓ import { bindKeyboard } from 'react-swipeable-views-utils-react-18-fix';
✗ import { bindKeyboard } from './bindKeyboard';
Imports the bindKeyboard HOC to enable keyboard navigation for swipeable views. Ensure consistent import paths.
This quickstart demonstrates how to use the `autoPlay` HOC from `react-swipeable-views-utils-react-18-fix` to create an auto-advancing carousel. It assumes `react-swipeable-views` is also installed. It includes state management for the active slide and image rendering within the swipeable component.
import React, { useState } from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils-react-18-fix';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const tutorialSteps = [
{ label: 'San Francisco – Oakland Bay Bridge', imgPath: 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60' },
{ label: 'Bird', imgPath: 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60' },
{ label: 'Bali, Indonesia', imgPath: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=60' },
{ label: 'Goč, Serbia', imgPath: 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60' }
];
function AutoPlayCarousel() {
const [activeStep, setActiveStep] = useState(0);
const handleStepChange = (step: number) => {
setActiveStep(step);
};
return (
<div style={{ maxWidth: 400, flexGrow: 1 }}>
<AutoPlaySwipeableViews
axis="x"
index={activeStep}
onChangeIndex={handleStepChange}
enableMouseEvents
interval={3000}
>
{tutorialSteps.map((step, index) => (
<div key={step.label} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 250 }}>
{Math.abs(activeStep - index) <= 2 ? (
<img src={step.imgPath} alt={step.label} style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', width: '100%' }} />
) : null}
</div>
))}
</AutoPlaySwipeableViews>
<p style={{ textAlign: 'center' }}>{tutorialSteps[activeStep].label}</p>
</div>
);
}
export default AutoPlayCarousel;
Debug
Known issues
deprecatedThis package is a specific 'fix' for React 18 compatibility with `react-swipeable-views-utils`. It is explicitly mentioned in an NPM result that it 'Will be useless after https://github.com/oliviertassinari/react-swipeable-views/pull/668 merge.' Users should monitor the upstream `react-swipeable-views` project for native React 18 support and transition away from this fix once upstream support is stable.fixMonitor the official `react-swipeable-views` repository for updates regarding React 18 compatibility. Once the main library is updated, migrate to it and uninstall this fix package.
affects: >=0.14.0
breakingVersion `0.14.0` removed legacy context usage. Code relying on React's deprecated context API within views or utilities will break.fixRefactor components to use modern React context API (`React.createContext`) or other state management solutions. Remove any reliance on `contextTypes` or `getChildContext`.
affects: >=0.14.0
breakingStarting with `v0.14.0-alpha.0`, this package implements workarounds for `UNSAFE_*` lifecycle methods (`componentWillReceiveProps`, `componentWillMount`). This implies a minimum React version requirement of 16.3 or higher, as these methods were introduced then.fixEnsure your project uses React 16.3 or newer. If on an older React version, you will encounter compatibility issues or warnings. For new components, prefer hooks or `getDerivedStateFromProps`/`getSnapshotBeforeUpdate`.
affects: >=0.14.0-alpha.0
gotchaThe `autoPlay` HOC in `v0.14.0` was found to incorrectly swallow the third parameter of the `onChangeIndex` callback. This can lead to unexpected behavior if your callback expects more than two arguments.fixIf using `onChangeIndex` with `autoPlay`, verify the received parameters. If your logic depends on the third parameter, you may need to apply a patch or update to a newer version where this is resolved, or work around it by deriving necessary information from the first two parameters.
affects: 0.14.0
gotchaIn versions up to `0.13.3`, mouse events might not be enabled by default, leading to an unresponsive swipe experience on desktop browsers. Users might be implicitly expected to add the `enableMouseEvents` prop.fixAlways include the `enableMouseEvents` prop on your `SwipeableViews` component when you intend for mouse interactions to trigger swipe actions.
affects: <=0.13.3
Errors
Common errors & fixes
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended
The package or underlying `react-swipeable-views` uses legacy lifecycle methods that trigger warnings in React 18's Strict Mode.
fixThis package includes workarounds for these, but the warning might still appear if other dependencies are outdated. Ensure all `react` and `react-dom` related packages are updated to their React 18 compatible versions. The workaround in `v0.14.0-alpha.0` attempts to mitigate this, but it's a fundamental React Strict Mode behavior.
TypeError: Cannot read properties of undefined (reading 'context')
This error typically occurs after `v0.14.0` due to the removal of React's legacy context API. Your components might still be trying to access `this.context` without a provider or without using the modern `useContext` hook.
fixUpdate your components to utilize React's modern Context API (`React.createContext` and `useContext`) instead of the deprecated legacy context features. Ensure all context providers are correctly set up.
TypeError: onChangeIndex is not a function
When using the `autoPlay` HOC, the `onChangeIndex` prop might not be correctly passed or might be swallowed by the HOC, especially in `v0.14.0`, leading to this runtime error if your component expects it. [cite: release notes]
fixInspect the `onChangeIndex` prop's behavior when wrapped with `autoPlay`. In `v0.14.0`, there was a known issue of parameters being swallowed. Ensure your callback is robust to potentially fewer arguments or consider updating if a fix for this specific swallowing issue is available.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
This usually indicates an incorrect import or usage of a Higher-Order Component. For instance, attempting to render `autoPlay` directly instead of the component it wraps, or a default import when a named import is expected.
fixVerify that `SwipeableViews` is correctly passed as an argument to `autoPlay` (e.g., `autoPlay(SwipeableViews)`), and that `AutoPlaySwipeableViews` (the result of the HOC call) is the component being rendered. Ensure all imports are named correctly, e.g., `import { autoPlay } from 'package-name';`. Audit
Dependencies
reactrequiredCore React library required for UI components and JSX compilation.