{"repo":"nerdyman/react-compare-slider","free":true,"listed":false,"github":"https://github.com/nerdyman/react-compare-slider","clone":"git clone https://github.com/nerdyman/react-compare-slider.git","description":"A slider component to compare any two React components in landscape or portrait orientation. It supports custom images, videos... and everything else.","language":"TypeScript","stars":377,"topics":["react","react-component","comparison-sliders","compare-images","compare-image-video","typescript","portrait","twentytwenty","comparison","compare"],"license":"MIT","category":"ui-components","readme_excerpt":"React Compare Slider Compare two components side-by-side or top-to-toe. Features - Supports responsive images and any other React components ( picture , video , canvas , iframe , etc.) - Supports landscape and portrait orientations - Accessible with screen reader and keyboard support out of the box - Simple API - Unopinionated and fully customizable, optionally use your own components and styles - Responsive and fluid with intrinsic sizing - Teeny-tiny, zero dependencies, tree-shakeable - Type safe Demos - Storybook: docs, demos, custom recipes, custom handles - Standalone demo Usage Install Basic Image Usage You may use ReactCompareSliderImage to render images or use your own custom components. Props Prop Type Required Default Description :---------------------------------------------------------------------------------------------------------- :--------------------------- :------: ------------ --------------------------------------------------------------------------------------------------- boundsPadding string 0px Padding to limit the slideable bounds on the X-axis (landscape) or Y-axis (portrait). browsingContext globalThis globalThis Context to bind events to (useful for iframes). changePositionOnHover boolean false Whether the slider should follow the pointer on hover. clip all\\ itemOne\\ itemTwo all Whether to clip itemOne , itemTwo or all items. defaultPosition number 50 Initial percentage position of divide ( 0-100 ). disabled boolean false Whether to disable slider ","default_branch":null,"files":null,"tree":[],"storefront":"/r/nerdyman","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/nerdyman/react-compare-slider/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}