{"id":18063,"library":"react-swipeable-views-utils-react-18-fix","title":"React Swipeable Views Utilities for React 18","description":"This package, `react-swipeable-views-utils-react-18-fix`, provides a collection of utility modules and Higher-Order Components (HOCs) designed to extend the functionality of the `react-swipeable-views` library. It specifically targets compatibility with React 18, addressing issues like the deprecation of legacy context and `UNSAFE_*` lifecycle methods that older versions of the base utilities might encounter. Key functionalities include `autoPlay` for automatic slide transitions, `virtualize` for efficient rendering of large numbers of slides, and `bindKeyboard` for keyboard navigation. The current stable version is 0.14.1. While the original `react-swipeable-views-utils` faced compatibility challenges with React 18, this specific fork or adaptation aims to provide a stable solution, serving as an important companion for developers using `react-swipeable-views` in modern React environments. Its release cadence appears to be driven by critical fixes and compatibility updates for the core `react-swipeable-views` ecosystem. However, it's noted that this 'fix' might become less relevant if the primary `react-swipeable-views` package fully integrates native React 18 support directly.","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-react-18-fix","lang":"bash","label":"npm"},{"cmd":"yarn add react-swipeable-views-utils-react-18-fix","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-swipeable-views-utils-react-18-fix","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library required for UI components and JSX compilation.","package":"react","optional":false}],"imports":[{"note":"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.","wrong":"const autoPlay = require('react-swipeable-views-utils-react-18-fix').autoPlay;","symbol":"autoPlay","correct":"import { autoPlay } from 'react-swipeable-views-utils-react-18-fix';"},{"note":"Imports the virtualize HOC for handling large lists of slides efficiently. Avoid direct deep imports as they can change without notice.","wrong":"import virtualize from 'react-swipeable-views-utils-react-18-fix/lib/virtualize';","symbol":"virtualize","correct":"import { virtualize } from 'react-swipeable-views-utils-react-18-fix';"},{"note":"Imports the bindKeyboard HOC to enable keyboard navigation for swipeable views. Ensure consistent import paths.","wrong":"import { bindKeyboard } from './bindKeyboard';","symbol":"bindKeyboard","correct":"import { bindKeyboard } from 'react-swipeable-views-utils-react-18-fix';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { autoPlay } from 'react-swipeable-views-utils-react-18-fix';\n\nconst AutoPlaySwipeableViews = autoPlay(SwipeableViews);\n\nconst tutorialSteps = [\n  { label: 'San Francisco – Oakland Bay Bridge', imgPath: 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60' },\n  { label: 'Bird', imgPath: 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60' },\n  { label: 'Bali, Indonesia', imgPath: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=60' },\n  { label: 'Goč, Serbia', imgPath: 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60' }\n];\n\nfunction AutoPlayCarousel() {\n  const [activeStep, setActiveStep] = useState(0);\n\n  const handleStepChange = (step: number) => {\n    setActiveStep(step);\n  };\n\n  return (\n    <div style={{ maxWidth: 400, flexGrow: 1 }}>\n      <AutoPlaySwipeableViews\n        axis=\"x\"\n        index={activeStep}\n        onChangeIndex={handleStepChange}\n        enableMouseEvents\n        interval={3000}\n      >\n        {tutorialSteps.map((step, index) => (\n          <div key={step.label} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 250 }}>\n            {Math.abs(activeStep - index) <= 2 ? (\n              <img src={step.imgPath} alt={step.label} style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', width: '100%' }} />\n            ) : null}\n          </div>\n        ))}\n      </AutoPlaySwipeableViews>\n      <p style={{ textAlign: 'center' }}>{tutorialSteps[activeStep].label}</p>\n    </div>\n  );\n}\n\nexport default AutoPlayCarousel;","lang":"typescript","description":"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."},"warnings":[{"fix":"Monitor 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.","message":"This 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.","severity":"deprecated","affected_versions":">=0.14.0"},{"fix":"Refactor components to use modern React context API (`React.createContext`) or other state management solutions. Remove any reliance on `contextTypes` or `getChildContext`.","message":"Version `0.14.0` removed legacy context usage. Code relying on React's deprecated context API within views or utilities will break.","severity":"breaking","affected_versions":">=0.14.0"},{"fix":"Ensure 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`.","message":"Starting 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.","severity":"breaking","affected_versions":">=0.14.0-alpha.0"},{"fix":"If 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.","message":"The `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.","severity":"gotcha","affected_versions":"0.14.0"},{"fix":"Always include the `enableMouseEvents` prop on your `SwipeableViews` component when you intend for mouse interactions to trigger swipe actions.","message":"In 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.","severity":"gotcha","affected_versions":"<=0.13.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"This 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.","cause":"The package or underlying `react-swipeable-views` uses legacy lifecycle methods that trigger warnings in React 18's Strict Mode.","error":"Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended"},{"fix":"Update 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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'context')"},{"fix":"Inspect 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.","cause":"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]","error":"TypeError: onChangeIndex is not a function"},{"fix":"Verify 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';`.","cause":"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.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}