{"id":26869123,"url":"https://github.com/junkboy0315/react-compare-image","last_synced_at":"2025-03-31T06:01:17.162Z","repository":{"id":32459236,"uuid":"134489592","full_name":"tam315/react-compare-image","owner":"tam315","description":"React component to compare two images with a slider","archived":false,"fork":false,"pushed_at":"2025-01-07T04:57:28.000Z","size":7569,"stargazers_count":354,"open_issues_count":20,"forks_count":76,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T14:12:19.537Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-compare-image.yuuniworks.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tam315.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"junkboy0315"}},"created_at":"2018-05-23T00:14:27.000Z","updated_at":"2025-03-28T12:59:42.000Z","dependencies_parsed_at":"2024-06-18T13:37:38.752Z","dependency_job_id":"5183001d-3307-42c8-bea3-eb51af657e77","html_url":"https://github.com/tam315/react-compare-image","commit_stats":{"total_commits":243,"total_committers":12,"mean_commits":20.25,"dds":0.411522633744856,"last_synced_commit":"a8d9018c542cb1489bb12939dafa5c97b8fb7e58"},"previous_names":["tamura315/react-compare-image","tam315/react-compare-image","junkboy0315/react-compare-image"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tam315%2Freact-compare-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tam315%2Freact-compare-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tam315%2Freact-compare-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tam315%2Freact-compare-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tam315","download_url":"https://codeload.github.com/tam315/react-compare-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423731,"owners_count":20774820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-31T06:00:50.020Z","updated_at":"2025-03-31T06:01:17.127Z","avatar_url":"https://github.com/tam315.png","language":"TypeScript","funding_links":["https://github.com/sponsors/junkboy0315","https://www.buymeacoffee.com/FVSUK5u"],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Photo / Image"],"readme":"# React Compare Image\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)\n\n\u003ca href=\"https://www.buymeacoffee.com/FVSUK5u\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" width=\"180\" \u003e\u003c/a\u003e\n\nSimple React component to compare two images using slider.\n\n![img](https://user-images.githubusercontent.com/10986861/67158760-0f02a480-f377-11e9-9b83-75bc8005693a.gif)\n\nNOTE: [Vue.js Version](https://github.com/junkboy0315/vue-compare-image) is also available!\n\n## Demo \u0026 Sample codes\n\n[Demo \u0026 Sample codes](https://react-compare-image.yuuniworks.com/)\n\n## Features\n\n- Simple\n- Responsive (always fit to the parent width)\n- Horizontal \u0026 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\u003cReactCompareImage leftImage=\"image1.jpg\" rightImage=\"image2.jpg\" /\u003e;\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 `\u003cReact.Fragment /\u003e` 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunkboy0315%2Freact-compare-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunkboy0315%2Freact-compare-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunkboy0315%2Freact-compare-image/lists"}