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

0.8.1

• Add a first version of a mouse listener

0.8.0

• Add two types of a move listener
• Add new properties: alwaysCover, keyboardStep

0.7.0

• Add TypeScript

0.6.1

• Fix build script
• Fix link to the repository

0.6.0

• Add native animation

0.5.0

• Add Web accessibility

0.4.0

• Add callbacks: onDragStart, onDragEnd, onPositionChange

0.3.0

• Add defaultPosition prop
• Add a new method to set a slider position

0.2.0

• Add four behaviors: move, click, drag and static

0.1.0

• Initial release