compare-image-component

Compare Image Component

React component to compare images before and after. It can be used for comparison of compression quality or as a stand-alone component on the page.

Demo

Website

For more examples: storybook WIP

Features

• Doesn't use clip
• Responsive (native, without JS listeners)
• Dependencies free
• Custom slider
• Custom responsive or high resolution images or even custom components
• Set a slider position programmatically
• Native and custom animations
• Four different behavior (move, click, drag, static)
• Mobile friendly
• Well tested with 100% coverage WIP
• Strong typed by TypeScript

Docs

<CompareImage
	firstImage="/path/to/image.jpg"
	secondImage="/path/to/image.jpg"
/>

CompareImage

property	required	type	default	description
firstImage	yes	string	-	first image url
secondImage	yes	string	-	second image url
defaultPosition	no	number	50	default position of slider (percent)
Slider	no	React.Component	-	custom slider

Create a custom slider

WIP

Create a custom component

WIP

License

MIT