0.7.1 • Published 7 years ago
compare-image-component v0.7.1
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% coverageWIP- 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