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