$ show oliviertassinari/react-swipeable-views
This repository is a monorepo providing a React component library for swipeable views (carousels/ tabs) with touch and mouse support. It is split into multiple packages: `react-swipeable-views` (browser implementation), `react-swipeable-views-core` (shared utilities), `react-swipeable-views-utils` (higher-order components for auto-play, virtualize, and keyboard binding), and `react-swipeable-views-native` (experimental React Native support). The main component (`SwipeableViews`) uses CSS transitions and transforms to animate slides, with lazy loading and resistance effects. The HOCs provide composable enhancements: `autoPlay` adds timed auto-advance with visibility change handling, `virtualize` renders only a window of slides for large lists, and `bindKeyboard` enables arrow key navigation. The library is well-tested with mocha, chai, and sinon, and has a comprehensive documentation site built with Next.js. However, the codebase is dated (class components, outdated Babel and Next.js versions, no hooks) and maintenance appears stagnant, with many open issues and infrequent updates. The core utility functions are clean, reusable, and demonstrate good software engineering practices.
The LLM identified 4 files worth highlighting for reuse:
A pure function that computes the next slide index based on touch position, view length, and optional resistance. It implements a logarithmic resistance curve for edge bounds. This function is self-contained (no dependencies on React internals) and can be reused in any swipe-based UI component. It is thoroughly tested with edge cases.
A higher-order component that provides virtualized rendering of slides, rendering only a window of slides around the current index. It manages the window boundaries and handles index changes, including modular arithmetic for infinite loops. This pattern is reusable for any component that needs to render a virtual subset of a large list, with configurable overscan. The implementation is well-documented and tested.
A utility function that compares the keys of children in old and new props to determine if the same slide is being displayed, preventing unnecessary animations. This is a clean, reusable pattern for any component that needs to detect if a child element has changed. It correctly handles null children and dynamic arrays.
A higher-order component that adds auto-play functionality to a swipeable component, with configurable interval and direction, and automatic pause/resume when the page visibility changes. The pattern uses the react-event-listener and cleanly separates concerns. It can be reused for any component that needs timed transitions, with proper cleanup on unmount.