React Compare Slider

Compare two components side-by-side or top-to-toe.

[![Example](https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/docs/hero.gif)](https://stackblitz.com/github/nerdyman/react-compare-slider/tree/main/docs/example)

## Features - Supports responsive images and any other React components (`picture`, `video`, `canvas`, `iframe`, etc.) - Supports landscape and portrait orientations - Accessible with screen reader and keyboard support out of the box - Simple API - Unopinionated and fully customizable, optionally use your own components and styles - Responsive and fluid with intrinsic sizing - Teeny-tiny, zero dependencies, tree-shakeable - Type safe ## Demos - Storybook: [docs](https://react-compare-slider.js.org/?path=/docs/docs-introduction--docs), [demos](https://react-compare-slider.js.org/?path=/story/demos), [custom recipes](https://react-compare-slider.js.org/?path=/story/recipes), [custom handles](https://react-compare-slider.js.org/?path=/story/handles) - [Standalone demo](https://github.com/nerdyman/react-compare-slider/tree/main/docs/example) ## Usage ### Install ```sh npm install react-compare-slider # or yarn add react-compare-slider # or pnpm add react-compare-slider ``` ### Basic Image Usage You _may_ use `ReactCompareSliderImage` to render images or use your own custom components. ```tsx import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider'; export const Example = () => { return ( } itemTwo={} /> ); }; ``` ## Props | Prop | Type | Required | Default | Description | | :---------------------------------------------------------------------------------------------------------- | :--------------------------- | :------: | ------------ | --------------------------------------------------------------------------------------------------- | | [`boundsPadding`](https://react-compare-slider.js.org/?path=/docs/docs-bounds-padding--docs) | `string` | | `0px` | Padding to limit the slideable bounds on the X-axis (landscape) or Y-axis (portrait). | | [`browsingContext`](https://react-compare-slider.js.org/?path=/docs/docs-browsing-context--docs) | `globalThis` | | `globalThis` | Context to bind events to (useful for iframes). | | [`changePositionOnHover`](https://react-compare-slider.js.org/?path=/docs/docs-change-position-on-hover--docs) | `boolean` | | `false` | Whether the slider should follow the pointer on hover. | | [`clip`](https://react-compare-slider.js.org/?path=/docs/docs-clip--docs) | `all\|itemOne\|itemTwo` | | `all` | Whether to clip `itemOne`, `itemTwo` or `all` items. | | [`defaultPosition`](https://react-compare-slider.js.org/?path=/story/demos--default-position) | `number` | | `50` | Initial percentage position of divide (`0-100`). | | [`disabled`](https://react-compare-slider.js.org/?path=/docs/docs-disabled--docs) | `boolean` | | `false` | Whether to disable slider movement (items are still interactable). | | [`handle`](https://react-compare-slider.js.org/?path=/docs/docs-handles--docs) | `ReactNode` | | `undefined` | Custom handle component. | | `itemOne` | `ReactNode` | ✓ | `undefined` | First component to show in slider. | | `itemTwo` | `ReactNode` | ✓ | `undefined` | Second component to show in slider. | | [`keyboardIncrement`](https://react-compare-slider.js.org/?path=/docs/docs-keyboard-increment--docs) | `` number\|`${number}%` `` | | `5%` | Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed. | | [`onlyHandleDraggable`](https://react-compare-slider.js.org/?path=/docs/docs-only-handle-draggable--docs) | `boolean` | | `true` for touch devices, `false` for non-touch devices | Whether to only change position when handle is interacted with (useful for touch devices). | | [`onPositionChange`](https://react-compare-slider.js.org/?path=/story/demos--on-position-change) | `(position: number) => void` | | `undefined` | Callback on position change, returns current position percentage as argument. | | [`portrait`](https://react-compare-slider.js.org/?path=/story/demos--portrait) | `boolean` | | `false` | Whether to use portrait orientation. | | [`transition`](https://react-compare-slider.js.org/?path=/docs/docs-transition--docs) | `string` | | `'0.15s ease-out'\|'none'` | Shorthand CSS `transition` property to apply to handle movement. This is automatically `none` for users with the `prefers-reduced-motion: reduced` preference. | [API docs](https://react-compare-slider.js.org/?path=/docs/docs-api--docs) for more information. ### Advanced Usage You can also construct your own slider for more granular control. ```tsx import * as Slider from 'react-compare-slider/components'; import { useReactCompareSlider } from 'react-compare-slider/hooks'; export const Example = () => { // Access to state and event bindings of the slider. const sliderProps = useReactCompareSlider({ portrait: true }); return ( }; ``` See the [Components API docs](https://react-compare-slider.js.org/?path=/docs/docs-components-api--docs) for more information.