{"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.","language":"javascript","status":"maintenance","last_verified":"Sat Apr 25","install":{"commands":["npm install react-swipeable-views-utils-react-18-fix"],"cli":null},"imports":["import { autoPlay } from 'react-swipeable-views-utils-react-18-fix';","import { virtualize } from 'react-swipeable-views-utils-react-18-fix';","import { bindKeyboard } from 'react-swipeable-views-utils-react-18-fix';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}