react-compare-slider
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

React Compare Slider

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

Example

License MIT npm version Bundle size
GitHub CI status Coverage Demos


Features

  • Supports responsive images and any other React components (picture, video, canvas, iframe etc.)
  • Supports landscape and portrait orientations
  • Accessible – screen reader and keyboard support out of the box
  • Simple API
  • Unopinionated & fully customizable – optionally use your own components and styles
  • Responsive & fluid with intrinsic sizing
  • Teeny-tiny, zero dependencies
  • Type safe

Demos

Usage

Install

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.

import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export const Example = () => {
  return (
    <ReactCompareSlider
      itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
      itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
    />
  );
};

Props

Prop Type Required Default Description
boundsPadding number 0 Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
changePositionOnHover boolean false Whether the slider should follow the pointer on hover.
disabled boolean false Whether to disable slider movement (items are still interactable).
handle ReactNode undefined Custom handle component.
itemOne ReactNode undefined First component to show in slider.
itemTwo ReactNode undefined Second component to show in slider.
keyboardIncrement number|`${number}%` 5% Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed.
onlyHandleDraggable boolean false Whether to only change position when handle is interacted with (useful for touch devices).
onPositionChange function undefined Callback on position change, returns current position percentage as argument (position) => { ... }.
portrait boolean false Whether to use portrait orientation.
position number 50 Initial percentage position of divide (0-100).
transition string undefined Shorthand CSS transition property to apply to handle movement. E.g. .5s ease-in-out

API docs for more information.


Real World Examples

Checkout out the Real World Examples page.

Requirements

  • React 16.8+
  • The latest two versions of each major browser are officially supported

Package Sidebar

Install

npm i react-compare-slider

Weekly Downloads

18,926

Version

3.0.1

License

MIT

Unpacked Size

80.9 kB

Total Files

14

Last publish

Collaborators

  • nerdyman