{"id":30518046,"url":"https://github.com/sandeepv68/react-magnify","last_synced_at":"2026-04-07T08:32:28.132Z","repository":{"id":39711160,"uuid":"233241426","full_name":"Sandeepv68/react-magnify","owner":"Sandeepv68","description":"A simple configurable react plugin to perform image magnification","archived":false,"fork":false,"pushed_at":"2023-05-07T18:42:23.000Z","size":3227,"stargazers_count":2,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-15T21:38:26.913Z","etag":null,"topics":["image","image-magnification","image-magnifier","image-zoom","javascript","magnifier","node-image","plugin","react","typescript","ui","ui-library","zoom"],"latest_commit_sha":null,"homepage":"https://sandeepvattapparambil.github.io/react-magnify/","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/Sandeepv68.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-01-11T14:06:21.000Z","updated_at":"2020-12-29T09:33:50.000Z","dependencies_parsed_at":"2023-02-07T07:42:54.308Z","dependency_job_id":null,"html_url":"https://github.com/Sandeepv68/react-magnify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sandeepv68/react-magnify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Freact-magnify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Freact-magnify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Freact-magnify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Freact-magnify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sandeepv68","download_url":"https://codeload.github.com/Sandeepv68/react-magnify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepv68%2Freact-magnify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31506562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["image","image-magnification","image-magnifier","image-zoom","javascript","magnifier","node-image","plugin","react","typescript","ui","ui-library","zoom"],"created_at":"2025-08-26T12:11:17.759Z","updated_at":"2026-04-07T08:32:28.117Z","avatar_url":"https://github.com/Sandeepv68.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![reactmagnifier-logo](https://i.ibb.co/ZWKGhTm/logo.png)\n\n# ReactMagnifier v0.0.4\n\nReactMagnifier is a simple and highly configurable react plugin to perform image magnification. This is a **UMD** module, so it can be used isomorphically.\n\u003e **Note:** The name of the npm package is @sandeepv68/react-magnifier\n\n## Features\n\n* Light weight (18 KB minified)\n* Written in Typescript\n* Highly customizable\n* Supports touch screens as well\n* Supports event listeners \n* Supports all kinds of images and image urls, high resolutions as well\n* Supports custom css styles\n* Supports client-side react apps as well as server-side rendered react apps\n* No jQuery\n\n## Table of Contents\n\n\u003c!--ts--\u003e\n* [About](#reactmagnifier-v004)\n* [Features](#features)\n* [Demo](#demo)\n* [Installation](#installation)\n* [Sample Usage](#sample-usage)\n* [Dependency](#dependency)\n* [Changelog](#changelog)\n    * [v0.0.4](#v004)\n    * [v0.0.3](#v003)\n* [API Documentation](#api-documentation)\n    * [Props](#props)\n    * [Events](#events)\n* [Contributing](#contributing)\n* [Tests](#tests)\n* [Technologies Used](#technologies-used)\n* [License](#license)\n* [Acknowledgements](#acknowledgements)\n\u003c!--te--\u003e\n\n## Demo\n\n![demo-gif](https://i.ibb.co/cQdGjMJ/sample.gif)\nMore examples and demos can be found in `example` folder in the root of the repo.\n\n## Installation\n\nInstall the package from NPM using:\n```sh\nnpm i @sandeepv68/react-magnifier\n```\n\n## Sample Usage\n\nAdd the component to your project using:\n\n```js\nimport ReactMagnifier from \"@sandeepv68/react-magnifier\";\nimport image from \"./path/image\";\n\n \u003cReactMagnifier\n      imageUrl={image}\n      zoomSize={3}\n      imageAltText={\"Some text\"}\n      imageHeight={400}\n      imageWidth={600}\n      magnifierHeight={200}\n      magnifierWidth={200}\n      magnifierRadius={50}\n      magnifierBorderColor={\"white\"}\n      magnifierBorderStyle={\"solid\"}\n      magnifierBorderWidth={2}\n      magnifierShadow={true}\n      cursor={\"none\"}\n      getMagnifier={showEvent}\n      customImgStyles={'myClass'}\n      customContainerStyles={'aClass'}\n   /\u003e\n```\n\n## Dependency\n\nThis component requires the following node modules as its dependency:\n\n* `react` - The react js core library, version `(16.12.0)` is used here.\n* `react-dom` - The react js dom library, version`(16.12.0)` is used here.\n\n## Changelog\n\n#### v0.0.4\n\n* Refactored and optimized code\n* Unbind event listeners on component un-mount \n* package size reduced\n\n#### v0.0.3\n\n* Initial stable build\n* Includes all essential features and cuistomizations\n\n## API Documentation\n\n### Props\n\nThe following table gives all the possible input props and its default values and customizations.\n\n| Props | Type | Required | Default | Description | \n| :-- | :-- | :-- | :-- | :-- |\n| **`imageUrl`** | *String* | yes | empty | Url string for the image to be displayed and magnified.This is a mandatory prop. If not supplied, the component will throw \u003cbr/\u003e`ReactMagnifier Error: Image url is missing!. \u003cReactMagnifier imageUrl={url}/\u003e is required.` \u003cbr/\u003eerror in console, but will not break your apps ui.| \n| `imageAltText` | *String* | no | `react-magnifier-image` | The `alt` text value for the image |\n| `imageHeight` | *Number* | no | `auto` | Height of the image. If no value is provided, it preserves auto. |\n| `imageWidth` | *Number* | no | `auto` | Width of the image. If no value is provided, it preserves auto. |\n| `magnifierHeight` | *Number* | no | 100 | Height of the magnifier |\n| `magnifierWidth` | *Number* | no | 100 | Width of the magnifier |\n| `magnifierRadius` | *Number* | no | 50 | Border radius of the magnifier |\n| `magnifierBorderColor` | *String* | no | `#000` | Border color of the magnifier |\n| `magnifierBorderStyle` | *String* | no | `solid` | Border style of the magnifier |\n| `magnifierBorderWidth` | *Number* | no | 3 | Border width of the magnifier |\n| `magnifierShadow` | *Boolean* | no | `true` | Box shadow for the magnifier|\n| `cursor` | *String* | no | `none` | Type of mouse cursor on magnifier |\n| `zoomSize` | *Number* | no | 2 | Magnification factor |\n| `getMagnifier` | *Function* | no | empty | Get reference to the image under magnification. The function prop returns the html element. It also includes custom events fired inside the component. |\n| `customImgStyles` | *String* | no | empty | White space separated CSS class names in a single string format. It can be used to override the styles of react magnifier, example : `myClass newClass ..` |\n| `customContainerStyles` | *String* | no | empty | White space separated CSS class names in a single string format. It can be used to override the styles of react magnifier, example : `myClass newClass ..` |\n\n### Events\n\nThe following `events` are available on the ReactMagnifier component. These are available on the element returned from `getMagnifier` function prop\n\n| Event | Type | Description | \n| :-- | :-- | :-- |\n| `magnifier-initialized` | *CustomEvent* | This event is triggered when the magnifier is initialized for the first time. This event is triggered only once |\n| `magnfier-moved` | *CustomEvent* | This event is triggered anytime the magnifier is moved |\n| `magnifier-visible` | *CustomEvent* | This event is triggered when the magnifier is visible when hovered over the image |\n| `magnifier-invisible` | *CustomEvent* | This event is triggered when the magnifier is invisible when moved out of the image |\n\nThese events can be used to trigger custom logic in your app when magnifier is initialized and used.\n\n## Contributing\n\nAll suggestions and pull requests are welcome. Please read the [CODE_OF_CONDUCT](https://github.com/SandeepVattapparambil/react-magnify/blob/master/CODE_OF_CONDUCT.md) and [CONTRIBUTING](https://github.com/SandeepVattapparambil/react-magnify/blob/master/CONTRIBUTING.md) files before contributing.\n\nYou can clone the repo from the following url:\n```sh\ngit clone https://github.com/SandeepVattapparambil/react-magnify.git\n```\nThen in the repo root, you have the following npm scripts available in order of execution:\n\n* Install all the dependencies for development\n```sh\nnpm i\n```\n\n* Run the project\n```sh\nnpm start\n```\n\n* Run tests\n```sh\nnpm run test\n```\n\n* Create production build for react source\n```sh\nnpm run build\n```\n\n* Build typescript files\n```sh\nnpm run build-tsc\n```\n\n* Create development build\n```sh\nnpm run build-dev\n```\n\n* Create production build\n```sh\nnpm run build-prod\n```\n\nYou need to have `Nodejs` ,`npm` in your system as development dependency.\n\n## Tests\n\nThis project includes unit tests written in `Jest` testing library. Tests can be run by the npm script\n```sh\nnpm run test\n```\n## Technologies Used\n\n![technologies-used](https://i.ibb.co/3vf5Td1/tech-stack.png)\n\n## License\n\nMIT License\n\nCopyright (c) 2020 Sandeep Vattapparambil [http://www.sandeepv.in](http://www.sandeepv.in)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n## Acknowledgements\n\nThis project is inspired from [Blowup.js](https://paulkr.github.io/blowup.js/), but not copied or does not include any or part of it in this project.\n\nMade with :heart: by [Sandeep Vattapparambil](https://github.com/SandeepVattapparambil).\n\nAll images used in demos and documentations are from [Unsplash.com](https://unsplash.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeepv68%2Freact-magnify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandeepv68%2Freact-magnify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeepv68%2Freact-magnify/lists"}