{"id":13461340,"url":"https://github.com/ethanselzer/react-image-magnify","last_synced_at":"2025-03-24T22:34:39.164Z","repository":{"id":37734543,"uuid":"67082867","full_name":"ethanselzer/react-image-magnify","owner":"ethanselzer","description":"A responsive image zoom component designed for shopping sites.","archived":false,"fork":false,"pushed_at":"2024-05-11T16:55:01.000Z","size":16470,"stargazers_count":653,"open_issues_count":118,"forks_count":162,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-18T13:08:34.811Z","etag":null,"topics":["detail","ecommerce","enlarge","expand","image","lens","magnify","photo","picture","product","react","shopping","store","zoom"],"latest_commit_sha":null,"homepage":"https://ethanselzer.github.io/react-image-magnify","language":"JavaScript","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/ethanselzer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2016-09-01T00:08:49.000Z","updated_at":"2025-03-05T04:08:50.000Z","dependencies_parsed_at":"2023-01-25T13:46:04.425Z","dependency_job_id":"3980ed54-9433-47be-90ae-cd91e59cbf86","html_url":"https://github.com/ethanselzer/react-image-magnify","commit_stats":{"total_commits":157,"total_committers":9,"mean_commits":"17.444444444444443","dds":0.07006369426751591,"last_synced_commit":"ff834d0667f437c9d0affcd0208c2b5ce09e92ac"},"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanselzer%2Freact-image-magnify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanselzer%2Freact-image-magnify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanselzer%2Freact-image-magnify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethanselzer%2Freact-image-magnify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ethanselzer","download_url":"https://codeload.github.com/ethanselzer/react-image-magnify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245366189,"owners_count":20603438,"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":["detail","ecommerce","enlarge","expand","image","lens","magnify","photo","picture","product","react","shopping","store","zoom"],"created_at":"2024-07-31T11:00:35.090Z","updated_at":"2025-03-24T22:34:38.522Z","avatar_url":"https://github.com/ethanselzer.png","language":"JavaScript","funding_links":[],"categories":["UI Components","JavaScript"],"sub_categories":["Carousel"],"readme":"# react-image-magnify\n\nA responsive React image zoom component for touch and mouse.\n\nDesigned for shopping site product detail.\n\nFeatures Include:\n* In-place and side-by-side image enlargement\n* Positive or negative space guide lens options\n* Interaction hint\n* Configurable enlarged image dimensions\n* Optional enlarged image external render\n* Hover intent\n* Long-press gesture\n* Fade transitions\n* Basic react-slick carousel support\n\n## Status\n[![CircleCI](https://img.shields.io/circleci/project/github/ethanselzer/react-image-magnify.svg)](https://circleci.com/gh/ethanselzer/react-image-magnify/tree/master)\n[![Coverage Status](https://coveralls.io/repos/github/ethanselzer/react-image-magnify/badge.svg?branch=master)](https://coveralls.io/github/ethanselzer/react-image-magnify?branch=master)\n[![npm](https://img.shields.io/npm/v/react-image-magnify.svg)](https://www.npmjs.com/package/react-image-magnify)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## Demo\nPlease visit the [react-image-magnify demo site](https://ethanselzer.github.io/react-image-magnify/#/)\n\nExperiment with react-image-magnify [live on CodePen](https://codepen.io/ethanselzer/full/oePMNY/).\nUse the Change View button to select editing mode or for different layout options.\nUse the Fork button to save your changes.\n\n\n## Installation\n\n```sh\nnpm install react-image-magnify\n```\n\n## Usage\nIf you are upgrading from v1x to v2x, please see the [release notes](https://github.com/ethanselzer/react-image-magnify/releases/tag/v2.0.0).\n\n```JavaScript\nimport ReactImageMagnify from 'react-image-magnify';\n...\n\u003cReactImageMagnify {...{\n    smallImage: {\n        alt: 'Wristwatch by Ted Baker London',\n        isFluidWidth: true,\n        src: watchImg300\n    },\n    largeImage: {\n        src: watchImg1200,\n        width: 1200,\n        height: 1800\n    }\n}} /\u003e\n...\n```\nSee more usage examples in the [example project](https://github.com/ethanselzer/react-image-magnify/tree/master/example).\n\n## Required Props\n| Prop                        | Type   | Default | Description                                                |\n|-----------------------------|--------|---------|--------------------------------|\n| smallImage                  | Object | N/A     | Small image information. See [Small Image](#small-image) below.|\n| largeImage                  | Object | N/A     | Large image information. See [Large Image](#large-image) below.|\n## Optional Styling Props\n| Prop                        | Type   | Default | Description                                                |\n|-----------------------------|--------|---------|---------------------------------|\n| className                   | String | N/A     | CSS class applied to root container element.               |\n| style                       | Object | N/A     | Style applied to root container element.                   |\n| imageClassName              | String | N/A     | CSS class applied to small image element.                  |\n| imageStyle                  | Object | N/A     | Style applied to small image element.                      |\n| lensStyle                   | Object | N/A   | Style applied to tinted lens.                              |\n| enlargedImageContainerClassName| String |  N/A       | CSS class applied to enlarged image container element.     |\n| enlargedImageContainerStyle | Object | N/A     | Style applied to enlarged image container element.         |\n| enlargedImageClassName      | String | N/A     | CSS class applied to enlarged image element.               |\n| enlargedImageStyle          | Object | N/A     | Style applied to enlarged image element.|\n## Optional Interaction Props\n| Prop                        | Type | Default | Description                                                |\n|-----------------------------|--------|-------|---------------------------------|\n| fadeDurationInMs            | Number | 300     | Milliseconds duration of magnified image fade in/fade out. |\n| hoverDelayInMs              | Number | 250   | Milliseconds to delay hover trigger.                       |\n| hoverOffDelayInMs           | Number | 150   | Milliseconds to delay hover-off trigger.                   |\n| isActivatedOnTouch          | Boolean| false   | Activate magnification immediately on touch. May impact scrolling.|\n| pressDuration               | Number | 500     | Milliseconds to delay long-press activation (long touch).  |\n| pressMoveThreshold          | Number | 5       | Pixels of movement allowed during long-press activation.   |\n## Optional Behavioral Props\n| Prop                        | Type | Default | Description                                                |\n|-----------------------------|--------|-------|---------------------------------|\n| enlargedImagePosition       | String |beside (over for touch)| Enlarged image placement. Can be 'beside' or 'over'.|\n| enlargedImageContainerDimensions | Object | {width: '100%', height: '100%'} | Specify enlarged image container dimensions as an object with width and height properties. Values may be expressed as a percentage (e.g. '150%') or a number (e.g. 200). Percentage is based on small image dimension. Number is pixels. Not applied when enlargedImagePosition is set to 'over', the default for touch input. |\n| enlargedImagePortalId | String | N/A | Render enlarged image into an HTML element of your choosing by specifying the target element id. Requires React v16. Ignored for touch input by default - see isEnlargedImagePortalEnabledForTouch.|\n| isEnlargedImagePortalEnabledForTouch | Boolean | false | Specify portal rendering should be honored for touch input. |\n| hintComponent               |Function|(Provided)| Reference to a component class or functional component. A Default is provided.|\n| shouldHideHintAfterFirstActivation| Boolean | true   | Only show hint until the first interaction begins.         |\n| isHintEnabled               | Boolean| false   | Enable hint feature. |\n| hintTextMouse               | String |Hover to Zoom| Hint text for mouse. |\n| hintTextTouch               | String |Long-Touch to Zoom| Hint text for touch. |\n| shouldUsePositiveSpaceLens  | Boolean| false | Specify a positive space lens in place of the default negative space lens. |\n| lensComponent  | Function | (Provided) | Specify a custom lens component. |\n\n### Small Image\n```\n{\n    src: String, (required)\n    srcSet: String,\n    sizes: String,\n    width: Number, (required if isFluidWidth is not set)\n    height: Number, (required if isFluidWidth is not set)\n    isFluidWidth: Boolean, (default false)\n    alt: String,\n    onLoad: Function,\n    onError: Function\n}\n```\nFor more information on responsive images, please try these resources:  \n[Responsive Images 101](https://cloudfour.com/thinks/responsive-images-101-definitions/)  \n[Responsive Images - The srcset and sizes Attributes](https://bitsofco.de/the-srcset-and-sizes-attributes/)\n\n### Large Image\n```\n{\n    src: String, (required)\n    srcSet: String,\n    sizes: String,\n    width: Number, (required)\n    height: Number, (required)\n    alt: String, (defaults to empty string)\n    onLoad: Function,\n    onError: Function\n}\n```\n\n## Support\n\nPlease [open an issue](https://github.com/ethanselzer/react-image-magnify/issues).\n\n## Example Project\n```ssh\ngit clone https://github.com/ethanselzer/react-image-magnify.git\ncd react-image-magnify\nnpm install\nnpm run build\ncd example\nyarn\nyarn start\n```\n\nIf your default browser does not start automatically, open a new browser window and go to localhost:3000\n\n## Development\n\n```ssh\ngit clone https://github.com/ethanselzer/react-image-magnify.git\ncd react-image-magnify\nnpm install\nnpm run #See available commands\n```\n\nThe [Example Project](#example-project) may be used in development.\n\nTo rebuild the source automatically when changes are made, run `yarn run build-watch`.\n\n## Contributing\n\nPlease contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch,\nadd commits, and [open a pull request](https://github.com/ethanselzer/react-image-magnify/compare/).\n\n## Attribution\n\nThanks to the following community members for opening Issues and Pull Requests.\n\n@damien916  \n@colepatrickturner  \n@andreatosatto90  \n@nathanziarek  \n@hombrew  \n@smashercosmo  \n@sk1e  \n@vidries  \n@ionutzp  \n@sbloedel  \n@spiderbites  \n@Akarshit  \n@eddy20vt  \n@evannoronha  \n@benjaminadk  \n@nilsklimm  \n@m4recek  \n@yaser-ali-vp  \n@carlgunderson  \n@tojvan  \n@kskonecka  \n@Coriou  \n\nYou are awesome! ✨💫\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethanselzer%2Freact-image-magnify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fethanselzer%2Freact-image-magnify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethanselzer%2Freact-image-magnify/lists"}