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