react-compare-component v0.8.1

React Compare Component

React component to compare two components side-by-side using the slider (responsive, without css width or clip)

It can be used to compare before-after images, compression quality and any other elements (video, text)

Demo

Website

For more examples: storybook WIP

Features

• Any components to compare (images, video (native or youtube) or even plain text) example WIP
• Doesn't use width or clip
• Responsive (native, without JS listeners) example WIP
• Dependencies free
• Custom slider component example WIP
• Full control programmatically
  • Default slider position example WIP
  • Set custom slider position from a script example WIP
  • Callback for all actions (onDragStart, onDragEnd, onPositionChange (also you can prevent this action)) example WIP
• Web accessibility more WIP
• Native animations example WIP, more WIP
• Four different behaviors (move, click, drag, static) example WIP, more WIP
• Mobile friendly more WIP
• Well tested with 100% coverage WIP
• Code quality by tslint and eslint WIP
• Strong typed by TypeScript

Docs

<Compare
	 left={<img src="path/to/image.jpg" style={{display: 'block', width: '100%'}} />}
	 right={<img src="path/to/image.jpg" style={{display: 'block', width: '100%'}} />}
	 slider={<div style={{backgroundColor: 'white', width: '3px', height: '100%'}}>}
	 label="Compare Images"
/>

Compare

For other types check the ~~website WIP~~ WIP

Create Component WIP

WIP

Create Slider WIP

WIP

Component Behaviors WIP

WIP

Web accessibility WIP

WIP

Native Animation WIP

WIP

Mobile WIP

WIP

Compare Component

This package is a part of compare-component which is also available for other libraries:

• React
• Vue WIP
• Angular WIP
• Polymer WIP
• AngularJS WIP
• jQuery WIP
• VanillaJS (no libraries) WIP
• Ember WIP
• Mithril WIP

License

MIT