DOCSEARCHbyAlgolia
Submit Docs

react-compare-slider

repository·main·Indexed 18 days ago

https://github.com/nerdyman/react-compare-slider

A lightweight, type-safe React component for comparing two components side-by-side or top-to-bottom using a draggable slider handle. It supports responsive images, videos, canvases, and any React component. The library provides a high-level ReactCompareSlider component for standard use, as well as a low-level Components API (Provider, Root, Item, Handle) and the useReactCompareSlider hook for building fully custom slider architectures.

Tokens
10.2K
Snippets
40
Records
50
Agent score
63%

What's inside react-compare-slider

  1. How to use custom handles in ReactCompareSlider

    main

    You can provide a custom component to the handle prop of the main ReactCompareSlider component. If no handle prop is provided, the default ReactCompareSliderHandle is used.

    Accessibility Note: When creating custom handles, use non-interactive elements (like div or span) because handles are already announced as slider controls to screen readers. Using interactive elements inside a handle can cause issues for assistive technologies.

    // Example concept of passing a custom handle
<ReactCompareSlider
  handle={<MyCustomHandle />}
  // ... other props
/>

  2. When to use components vs ReactCompareSlider

    main

    The ReactCompareSlider component is a high-level, pre-built component that uses these low-level components internally.

    Rule of thumb:

    • Use ReactCompareSlider for standard implementations.
    • Use the individual components (Provider, Root, Item, etc.) only if you need to build a completely custom slider architecture.
    • If you only want to customize the look of the slider handle while using the pre-built component, you should only use the Handle component.

  4. How to build a custom slider using components

    main

    While the pre-built ReactCompareSlider component is recommended for most use cases, you can build a fully custom slider using the low-level components exported from react-compare-slider/components.

    These components follow a pattern similar to headless UI libraries like Radix or Base UI, providing full control over state, events, and rendering. To use them, you must combine them with the useReactCompareSlider hook from react-compare-slider/hooks, which provides the necessary context and state via a Provider.

    import { Provider, Root, Item, Image, HandleRoot, Handle } from 'react-compare-slider/components';
import { useReactCompareSlider } from 'react-compare-slider/hooks';

function MyCustomSlider() {
  // useReactCompareSlider returns props to be passed to the Provider
  const sliderProps = useReactCompareSlider({
    // configuration options here
  });

  return (
    <Provider {...sliderProps}>
      <Root>
        <Item>
          <Image src="left.jpg" />
        </Item>
        <Item>
          <Image src="right.jpg" />
        </Item>
        <HandleRoot>
          <Handle />
        </HandleRoot>
      </Root>
    </Provider>
  );
}

  6. Render images with `ReactCompareSliderImage`

    main

    To display images within a ReactCompareSlider, use the ReactCompareSliderImage component. This component is a standalone img element that automatically applies positioning and fitting logic via the styleFitContainer utility. You can use it as a standard image component or provide your own custom image elements (like picture or img) as children to the slider.

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

<ReactCompareSlider
  itemOne={<ReactCompareSliderImage src="image1.jpg" />}
  itemTwo={<ReactCompareSliderImage src="image2.jpg" />}
/>

  8. Use the `disabled` prop to prevent slider interaction

    main

    The disabled prop can be applied to the ReactCompareSlider component to prevent users from interacting with the slider. When disabled is set to true, the slider becomes non-interactive, and the component automatically applies the appropriate accessibility attributes to the slider controls to ensure screen readers correctly identify the disabled state.

    <ReactCompareSlider
  // ... other props
  disabled={true}
/>