{"_id":"@agauravdev/react-compare-image","_rev":"1-77c078cab694b1eea3dc82a72899ccc0","name":"@agauravdev/react-compare-image","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@agauravdev/react-compare-image","version":"1.0.0","description":"React component to compare two images using slider.","main":"dist/bundle.js","types":"dist/ReactCompareImage.d.ts","scripts":{"build":"del-cli dist/**/* && webpack --config ./webpack.production.config.js && pnpm tsc","test":"jest","test:watch":"jest --watch","storybook":"start-storybook -p 6006 -s ./public","build-storybook":"build-storybook","loki:approve":"pnpm loki approve","loki:test":"build-storybook && pnpm loki --chromeDockerImage yukinying/chrome-headless-browser-stable:107.0.5304.121 --chromeFlags=\"--headless --disable-gpu --hide-scrollbars --disable-web-security\" --reactUri file:./storybook-static --requireReference test --chromeTolerance 1","loki:update-references":"build-storybook && pnpm loki --chromeDockerImage yukinying/chrome-headless-browser-stable:107.0.5304.121 --chromeFlags=\"--headless --disable-gpu --hide-scrollbars --disable-web-security\" --reactUri file:./storybook-static update"},"repository":{"type":"git","url":"git+https://github.com/junkboy0315/react-compare-image.git"},"author":{"name":"Shota Tamura"},"license":"MIT","peerDependencies":{"react":"^16.8 || ^17 || ^18","react-dom":"^16.8 || ^17 || ^18"},"dependencies":{"jest-environment-jsdom":"^29.3.1"},"devDependencies":{"@babel/core":"^7.20.5","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-object-rest-spread":"^7.20.2","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@storybook/react":"^6.5.13","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@types/resize-observer-browser":"^0.1.7","babel-eslint":"^10.0.1","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-polyfill":"^6.26.0","del-cli":"^5.0.0","eslint":"^8.28.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-jest":"^27.1.6","eslint-plugin-jsx-a11y":"^6.6.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","file-loader":"^6.0.0","jest":"^29.3.1","loki":"^0.30.3","prettier":"^2.8.0","react":"^18.2.0","react-dom":"^18.2.0","style-loader":"^3.3.1","typescript":"^4.9.3","url-loader":"^4.1.0","webpack-cli":"5.0.0"},"keywords":["picture comparison","image comparison","slider","react","twentytwenty"],"loki":{"configurations":{"chrome.laptop":{"target":"chrome.docker","width":1366,"height":768,"deviceScaleFactor":1,"mobile":false}}},"browserslist":["last 1 Chrome versions","last 1 Safari versions","last 1 Firefox versions","last 1 Edge versions","last 1 ChromeAndroid versions","last 1 iOS versions"],"bugs":{"url":"https://github.com/junkboy0315/react-compare-image/issues"},"homepage":"https://github.com/junkboy0315/react-compare-image#readme","overrides":{"webpack":"5.75.0"},"gitHead":"dc87b3179fcbf1ad5814b7f4dd2560c420d8b261","_id":"@agauravdev/react-compare-image@1.0.0","_nodeVersion":"16.19.1","_npmVersion":"9.6.5","dist":{"integrity":"sha512-Dqq47U/gQ+n+BBLXxDxXzkfay6VeJlBPe8wtPfBe6LMpH1kMQDou3L7xHUbpN9S5VmAo4ivv7xzqrm4cmgXz/g==","shasum":"38f379f9e81a7c501b0b3aa7a065cb7055a68909","tarball":"https://registry.npmjs.org/@agauravdev/react-compare-image/-/react-compare-image-1.0.0.tgz","fileCount":11,"unpackedSize":10795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYHRSJGW8kRvLmh/C7VeFJka/oeqiqgnQwUsDWKepnDAiA0o36MUeEcbCSv7v0wEQ/Ag/+M4qDq6cyyod+OWhQtcg=="}]},"_npmUser":{"name":"agauravdev","email":"agauravdev@gmail.com"},"directories":{},"maintainers":[{"name":"agauravdev","email":"agauravdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-compare-image_1.0.0_1686650469529_0.044127925682688085"},"_hasShrinkwrap":false},"1.0.1":{"name":"@agauravdev/react-compare-image","version":"1.0.1","description":"React component to compare two images using slider.","main":"dist/bundle.js","types":"dist/ReactCompareImage.d.ts","scripts":{"build":"del-cli dist/**/* && webpack --config ./webpack.production.config.js && pnpm tsc","prepublishOnly":"pnpm build","test":"jest","test:watch":"jest --watch","storybook":"start-storybook -p 6006 -s ./public","build-storybook":"build-storybook","loki:approve":"pnpm loki approve","loki:test":"build-storybook && pnpm loki --chromeDockerImage yukinying/chrome-headless-browser-stable:107.0.5304.121 --chromeFlags=\"--headless --disable-gpu --hide-scrollbars --disable-web-security\" --reactUri file:./storybook-static --requireReference test --chromeTolerance 1","loki:update-references":"build-storybook && pnpm loki --chromeDockerImage yukinying/chrome-headless-browser-stable:107.0.5304.121 --chromeFlags=\"--headless --disable-gpu --hide-scrollbars --disable-web-security\" --reactUri file:./storybook-static update"},"repository":{"type":"git","url":"git+https://github.com/junkboy0315/react-compare-image.git"},"author":{"name":"Shota Tamura"},"license":"MIT","peerDependencies":{"react":"^16.8 || ^17 || ^18","react-dom":"^16.8 || ^17 || ^18"},"dependencies":{"jest-environment-jsdom":"^29.3.1"},"devDependencies":{"@babel/core":"^7.20.5","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-object-rest-spread":"^7.20.2","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@storybook/react":"^6.5.13","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@types/resize-observer-browser":"^0.1.7","babel-eslint":"^10.0.1","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-polyfill":"^6.26.0","del-cli":"^5.0.0","eslint":"^8.28.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-jest":"^27.1.6","eslint-plugin-jsx-a11y":"^6.6.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","file-loader":"^6.0.0","jest":"^29.3.1","loki":"^0.30.3","prettier":"^2.8.0","react":"^18.2.0","react-dom":"^18.2.0","style-loader":"^3.3.1","typescript":"^4.9.3","url-loader":"^4.1.0","webpack-cli":"5.0.0"},"keywords":["picture comparison","image comparison","slider","react","twentytwenty"],"loki":{"configurations":{"chrome.laptop":{"target":"chrome.docker","width":1366,"height":768,"deviceScaleFactor":1,"mobile":false}}},"browserslist":["last 1 Chrome versions","last 1 Safari versions","last 1 Firefox versions","last 1 Edge versions","last 1 ChromeAndroid versions","last 1 iOS versions"],"bugs":{"url":"https://github.com/junkboy0315/react-compare-image/issues"},"homepage":"https://github.com/junkboy0315/react-compare-image#readme","overrides":{"webpack":"5.75.0"},"gitHead":"dc87b3179fcbf1ad5814b7f4dd2560c420d8b261","_id":"@agauravdev/react-compare-image@1.0.1","_nodeVersion":"16.19.1","_npmVersion":"9.6.5","dist":{"integrity":"sha512-NAHcXwFjS8B5nb748NPRhLlbk356wsPut1YLQT0077kxnk3CpGlxB1j+D2o9+UO4AKP/u0TAfA2HJK20a0XVPg==","shasum":"a7b2b8c36fe98638e58fba095443b87f27355e4d","tarball":"https://registry.npmjs.org/@agauravdev/react-compare-image/-/react-compare-image-1.0.1.tgz","fileCount":13,"unpackedSize":18662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaSU0rlxY0Zi0FlUtyhmI07mvwsYdOShtK2GvZvazSyAiBgnEkAZSEzDj13chM35wm+oF9s4ftVHTr5S4Rh3cZVJw=="}]},"_npmUser":{"name":"agauravdev","email":"agauravdev@gmail.com"},"directories":{},"maintainers":[{"name":"agauravdev","email":"agauravdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-compare-image_1.0.1_1686650588151_0.5586756131486819"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-13T10:01:09.475Z","1.0.0":"2023-06-13T10:01:09.755Z","modified":"2023-06-13T10:03:08.407Z","1.0.1":"2023-06-13T10:03:08.309Z"},"maintainers":[{"name":"agauravdev","email":"agauravdev@gmail.com"}],"description":"React component to compare two images using slider.","homepage":"https://github.com/junkboy0315/react-compare-image#readme","keywords":["picture comparison","image comparison","slider","react","twentytwenty"],"repository":{"type":"git","url":"git+https://github.com/junkboy0315/react-compare-image.git"},"author":{"name":"Shota Tamura"},"bugs":{"url":"https://github.com/junkboy0315/react-compare-image/issues"},"license":"MIT","readme":"# React Compare Image\n\n[](#contributors-)\n\n![\"Buy](\"https://cdn.buymeacoffee.com/buttons/default-orange.png\")
\n\nSimple React component to compare two images using slider.\n\n\n\nNOTE: [Vue.js Version](https://github.com/junkboy0315/vue-compare-image) is also available!\n\n## Demo & Sample codes\n\n[Demo & Sample codes](https://react-compare-image.yuuniworks.com/)\n\n## Features\n\n- Simple\n- Responsive (always fit to the parent width)\n- Horizontal & Vertical comparison\n\n## How to use\n\n```sh\nyarn add react-compare-image\n// or\nnpm install --save react-compare-image\n```\n\nNote: Version 1 or later works only with React16.8 or later. Use version 0 instead.\n\n```jsx\nimport ReactCompareImage from 'react-compare-image';\n\n;\n```\n\n## Props\n\n| Prop (\\* required) | type | default | description |\n| ------------------------ | ----------------------- | :---------: | --------------------------------------------------------------------------------------------------------------------- |\n| aspectRatio | `'taller'` or `'wider'` | `'taller'` | Which to choose if the aspect ratios of the images are different |\n| handle | element | null | Custom handle element. Just pass `` if you want to remove handle. |\n| handleSize | number (px) | 40 | diameter of slider handle (by pixel) |\n| hover | boolean | false | Whether to slide at hover |\n| leftImage \\* | string | null | left image's url |\n| leftImageAlt | string | `''` | alt props for left image |\n| leftImageCss | object | {} | Additional css for left image |\n| leftImageLabel | string | null | Label for the image (e.g. `before`) |\n| onSliderPositionChange | function | null | Callback function called each time the slider changes. The position (0 to 1) of the slider is passed as arg |\n| rightImage \\* | string | null | right image's url |\n| rightImageAlt | string | `''` | alt props for right image |\n| rightImageCss | object | {} | Additional css for right image |\n| rightImageLabel | string | null | Label for the image (e.g. `after`) |\n| skeleton | element | null | Element displayed while image is loading |\n| sliderLineColor | string | `'#ffffff'` | line color of slider |\n| sliderLineWidth | number (px) | 2 | line width of slider (by pixel) |\n| sliderPositionPercentage | number (float) | 0.5 | Default line position (from 0 to 1) |\n| vertical | boolean | false | Compare images vertically instead of horizontally. The left image is on the top and the right image is on the bottom. |\n\n## Supported browzer\n\nLatest modern browsers(Chrome, Safari, Firefox, Edge)\n","readmeFilename":"README.md"}