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 --saveIf you're using yarn, run:
yarn add react-hanji-sliderUsage
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 |