{"id":13670772,"url":"https://github.com/bmcmahen/react-image-enlarger","last_synced_at":"2025-04-14T05:10:09.326Z","repository":{"id":39442556,"uuid":"200123713","full_name":"bmcmahen/react-image-enlarger","owner":"bmcmahen","description":"Simple medium.com style image zooming with gesture support","archived":false,"fork":false,"pushed_at":"2022-12-11T00:29:07.000Z","size":4019,"stargazers_count":70,"open_issues_count":30,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T05:09:56.171Z","etag":null,"topics":["gesture","image-enlarger","image-zoom","medium-image","medium-zoom","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/embed/adoring-sun-dz5yj","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bmcmahen.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-01T21:52:44.000Z","updated_at":"2024-07-13T18:57:43.000Z","dependencies_parsed_at":"2022-09-04T01:40:18.009Z","dependency_job_id":null,"html_url":"https://github.com/bmcmahen/react-image-enlarger","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-image-enlarger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-image-enlarger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-image-enlarger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-image-enlarger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmcmahen","download_url":"https://codeload.github.com/bmcmahen/react-image-enlarger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248824681,"owners_count":21167345,"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":["gesture","image-enlarger","image-zoom","medium-image","medium-zoom","react"],"created_at":"2024-08-02T09:00:49.329Z","updated_at":"2025-04-14T05:10:09.304Z","avatar_url":"https://github.com/bmcmahen.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"# react-image-enlarger\n\n[![npm package](https://img.shields.io/npm/v/react-image-enlarger/latest.svg)](https://www.npmjs.com/package/react-image-enlarger)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social\u0026logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen)\n\nA medium.com style image zoom component with gesture dismissal similar to that found in the iOS Photos app. Originally built for use in [Sancho-UI](https://github.com/bmcmahen/sancho). Try the [demo here](https://codesandbox.io/embed/adoring-sun-dz5yj).\n\n## Features\n\n- Drag to dismiss\n- Optionally use a differernt enlarged image source\n- Optional loading indicator when loading the enlarged image\n- Spring based animations\n\n## Install\n\nInstall `react-image-enlarger` and `react-gesture-responder` using yarn or npm.\n\n```\nyarn add react-image-enlarger react-gesture-responder\n```\n\n## Usage\n\n```jsx\nimport Image from \"react-image-enlarger\";\n\nfunction SingleSource() {\n  const [zoomed, setZoomed] = React.useState(false);\n\n  return (\n    \u003cImage\n      style={{ width: \"200px\", height: \"auto\" }}\n      zoomed={zoomed}\n      src=\"my-image.jpg\"\n      alt=\"The best dog ever\"\n      onClick={() =\u003e setZoomed(true)}\n      onRequestClose={() =\u003e setZoomed(false)}\n    /\u003e\n  );\n}\n```\n\n## API\n\nAny additional props beyond the ones listed below are passed to the thumbnail image.\n\n| Name             | Type            | Default Value | Description                                                |\n| ---------------- | --------------- | ------------- | ---------------------------------------------------------- |\n| zoomed\\*         | boolean         |               | Whether the enlarged image is shown                        |\n| onRequestClose\\* | () =\u003e void;     |               | A callback for closing the zoomed image                    |\n| renderLoading    | React.ReactNode |               | Render a loading indicator                                 |\n| src\\*            | String          |               | The thumbnail image source (and enlarged, if not provided) |\n| enlargedSrc      | String          |               | An optional larger image source                            |\n| overlayColor     | String          |               | Customize the background color of the overlay              |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Freact-image-enlarger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmcmahen%2Freact-image-enlarger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Freact-image-enlarger/lists"}