React Swipeable Views Utilities for React 18

0.14.1 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended ↓

cause The package or underlying `react-swipeable-views` uses legacy lifecycle methods that trigger warnings in React 18's Strict Mode.

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.

error TypeError: Cannot read properties of undefined (reading 'context') ↓

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.

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.

error TypeError: onChangeIndex is not a function ↓

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]

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.

error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ↓

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.

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';.

Warnings

deprecated 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. ↓

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.

breaking Version `0.14.0` removed legacy context usage. Code relying on React's deprecated context API within views or utilities will break. ↓

fix Refactor components to use modern React context API (`React.createContext`) or other state management solutions. Remove any reliance on `contextTypes` or `getChildContext`.

breaking 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. ↓

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`.

gotcha 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. ↓

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.

gotcha 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. ↓

fix Always include the `enableMouseEvents` prop on your `SwipeableViews` component when you intend for mouse interactions to trigger swipe actions.

Install

npm install react-swipeable-views-utils-react-18-fix

yarn add react-swipeable-views-utils-react-18-fix

pnpm add react-swipeable-views-utils-react-18-fix

Imports

autoPlay
wrong
```
const autoPlay = require('react-swipeable-views-utils-react-18-fix').autoPlay;
```
correct
```
import { autoPlay } from 'react-swipeable-views-utils-react-18-fix';
```
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

wrong

import virtualize from 'react-swipeable-views-utils-react-18-fix/lib/virtualize';

correct

import { virtualize } from 'react-swipeable-views-utils-react-18-fix';

Imports the virtualize HOC for handling large lists of slides efficiently. Avoid direct deep imports as they can change without notice.

bindKeyboard
wrong
```
import { bindKeyboard } from './bindKeyboard';
```
correct
```
import { bindKeyboard } from 'react-swipeable-views-utils-react-18-fix';
```
Imports the bindKeyboard HOC to enable keyboard navigation for swipeable views. Ensure consistent import paths.

Quickstart

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;