React Hanji Slider

React Hanji Slider is a React component that allows users to compare two blocks of content interactively. By dragging a slider control, users can unveil or conceal the respective content blocks, providing a visually engaging method for comparing different types of data or images

Demo

Examples: https://react-hanji-slider-demo.vercel.app/

Installation

If you're using npm, in the command prompt run:

npm install react-hanji-slider --save

If you're using yarn, run:

yarn add react-hanji-slider

Usage

To use the component, first import ReactHanjiSlider into your file:

import ReactHanjiSlider from "react-hanji-slider";

<ReactHanjiSlider
  slidePrimary={<div>Primary Component 🥢</div>}
  slideSecondary={<div>Secondary Component 🍚</div>}
/>

Props

| Property | Type | Default | Description | | :--------------------|:---------------|:------------|:------------------------------------------------------------| | slidePrimary | Element | null | Used to compare with Secondary component | | stylePrimary | styles | undefined | Styles for Primary component wrap | | slideSecondary | Element | null | Used to compare with Primary component | | styleSecondary | styles | undefined | Styles for Secondary component wrap | | styleWrap | styles | undefined | Styles for root wrap | | defaultPercentage | number | 50 | Default proportion of content visibility | | separatorColor | string | #fff | Color of separator | | value | number | undefined | Used to set custom scroll position |