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

Name	Required	Type	Default	Description
left	yes	React.ComponentType | React.ReactElement	-
right	yes	React.ComponentType | React.ReactElement	-
slider	no	React.ComponentType | React.ReactElement	undefined
label	yes	string	-
behavior	no	Behavior	Behavior.Move
defaultPosition	no	number	50
animation	no	AnimationType	undefined
onDragStart	no	OnDragStartCallbackType	undefined
onDragEnd	no	OnDragEndCallbackType	undefined
onPositionChange	no	OnPositionChangeCallbackType	undefined
tabIndex	no	number	0
sliderMode	no	SliderMode	SliderMode.Normal
clickDragMode	no	ClickDragMode	ClickDragMode.Global
alwaysCover	no	boolean	false
keyboardStep	no	number	5

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