{"id":20010292,"url":"https://github.com/adriangeorgem/react-image-comparison-slider","last_synced_at":"2026-04-15T05:31:39.119Z","repository":{"id":172296080,"uuid":"649102123","full_name":"AdrianGeorgeM/React-Image-Comparison-Slider","owner":"AdrianGeorgeM","description":"React Image Comparison Slide is a powerful tool for visual comparison of two images. With its intuitive interface and customizable options, this project provides an efficient and user-friendly way to compare images side by side.","archived":false,"fork":false,"pushed_at":"2023-06-03T21:24:51.000Z","size":10745,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-09T16:09:16.638Z","etag":null,"topics":["before-after","comparison-image-slider","comparison-tool","image-comparison","image-diff","image-processing","javascript","open-source","react","react-component","slider","tailwindcss","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://react-image-comparison-slide.vercel.app","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/AdrianGeorgeM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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}},"created_at":"2023-06-03T19:33:19.000Z","updated_at":"2023-06-03T21:15:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2398643-d8ca-4bb4-aad0-6e23f5abe2a3","html_url":"https://github.com/AdrianGeorgeM/React-Image-Comparison-Slider","commit_stats":null,"previous_names":["adriangeorgem/react-image-comparison-slide"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/AdrianGeorgeM/React-Image-Comparison-Slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianGeorgeM%2FReact-Image-Comparison-Slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianGeorgeM%2FReact-Image-Comparison-Slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianGeorgeM%2FReact-Image-Comparison-Slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianGeorgeM%2FReact-Image-Comparison-Slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdrianGeorgeM","download_url":"https://codeload.github.com/AdrianGeorgeM/React-Image-Comparison-Slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdrianGeorgeM%2FReact-Image-Comparison-Slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31828530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"online","status_checked_at":"2026-04-15T02:00:06.175Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["before-after","comparison-image-slider","comparison-tool","image-comparison","image-diff","image-processing","javascript","open-source","react","react-component","slider","tailwindcss","typescript","vercel-deployment"],"created_at":"2024-11-13T07:19:12.495Z","updated_at":"2026-04-15T05:31:39.090Z","avatar_url":"https://github.com/AdrianGeorgeM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"````markdown\n# React Image Comparison Slider\n\nWelcome to the React Image Comparison Slider project! \nThis is a customizable and responsive React component that enables users to compare two images using a draggable slider.\n\n\n## Features\n\n- Fully Responsive: The component adapts to various container sizes, ensuring a seamless experience across different devices.\n- Customizable Slider Icon: You can easily replace the default slider icon with your own JSX to match your project's design.\n- Customizable Slider Color: The color of the slider can be customized to seamlessly blend with your project's design.\n- Customizable Initial Slider Position: You have the flexibility to specify the initial position of the slider as a percentage.\n\n## Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/AdrianGeorgeM/React-Image-Comparison-Slide\n```\n````\n\n2. Navigate to the project directory:\n\n```bash\ncd React-Image-Comparison-Slider\n```\n\n3. Install the dependencies:\n\n```bash\nnpm install\n```\n\nAlternatively, if you're using yarn:\n\n```bash\nyarn\n```\n\n## Development\n\nTo start the development server and run the React Image Comparison Slider locally, use the following command:\n\n```bash\nnpm start\n```\n\nThis will launch the development server and open your application in your default browser. You can then view and test the React Image Comparison Slider.\n\n## Usage\n\nHere's a basic example of how to use the React Image Comparison Slider in your application:\n\n```jsx\nimport ImageComparisonSlider from './ImageComparisonSlider';\n\n// Inside your component's return statement:\n\u003cImageComparisonSlider\n\toriginalImageSrc='/path/to/your/before-image.jpg'\n\tupscaledImageSrc='/path/to/your/after-image.jpg'\n\tsliderPosition={0.5}\n\tsliderColor='#ff0000'\n/\u003e;\n```\n\n## API\n\nYou can customize the component using the following props:\n\n| Prop             | Type   | Description                                                    |\n| ---------------- | ------ | -------------------------------------------------------------- |\n| originalImageSrc | string | The source path for the original or \"before\" image.            |\n| upscaledImageSrc | string | The source path for the upscaled or \"after\" image.             |\n| sliderPosition   | number | The initial position of the slider, specified as a percentage. |\n| sliderColor      | string | The color of the slider.                                       |\n\n## Contributing\n\nContributions to this project are welcome! If you have any ideas, enhancements, or bug fixes, feel free to fork the repository, make your changes, and submit a pull request. Your contributions are greatly appreciated.\n\n## License\n\nReact Image Comparison Slider is open source and available under the [MIT License](https://opensource.org/licenses/MIT).\n\n---\n\nPlease note that the `filter: 'grayscale(100%)'` property has been included in the code snippet solely for the purpose of illustrating the contrast between the \"before\" and \"after\" images. However, you are free to remove this property if it does not align with your specific design requirements. Feel free to modify the CSS styling within the `ImageComparisonSlider` component to achieve the desired visual effect that suits your project.\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriangeorgem%2Freact-image-comparison-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadriangeorgem%2Freact-image-comparison-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriangeorgem%2Freact-image-comparison-slider/lists"}