{"id":15546763,"url":"https://github.com/marshallku/smooth-zoom","last_synced_at":"2025-08-15T05:32:04.727Z","repository":{"id":54533873,"uuid":"338306275","full_name":"marshallku/smooth-zoom","owner":"marshallku","description":"A light weight javascript library for zooming images.","archived":false,"fork":false,"pushed_at":"2024-12-08T03:01:11.000Z","size":12836,"stargazers_count":19,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-08T04:16:45.842Z","etag":null,"topics":["image","picture","typescript","zoom","zoom-images"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/smooth-zoom","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/marshallku.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":"2021-02-12T11:59:38.000Z","updated_at":"2024-12-08T03:01:15.000Z","dependencies_parsed_at":"2024-11-18T15:28:50.322Z","dependency_job_id":"8afc09e0-1713-40e4-8c96-e8e84498796a","html_url":"https://github.com/marshallku/smooth-zoom","commit_stats":{"total_commits":96,"total_committers":2,"mean_commits":48.0,"dds":0.01041666666666663,"last_synced_commit":"32198a0f606b1ef03ff5dc118c9e85597cf637bf"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marshallku%2Fsmooth-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marshallku%2Fsmooth-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marshallku%2Fsmooth-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marshallku%2Fsmooth-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marshallku","download_url":"https://codeload.github.com/marshallku/smooth-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229893966,"owners_count":18140620,"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":["image","picture","typescript","zoom","zoom-images"],"created_at":"2024-10-02T13:04:32.803Z","updated_at":"2024-12-16T01:11:53.977Z","avatar_url":"https://github.com/marshallku.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smooth Zoom\n\n[![License](https://img.shields.io/npm/l/medium-zoom.svg)](https://www.npmjs.com/package/smooth-zoom)\n[![NPM Version](https://img.shields.io/npm/v/smooth-zoom.svg)](https://www.npmjs.com/package/smooth-zoom)\n[![Known Vulnerabilities](https://snyk.io/test/github/marshallku/smooth-zoom/badge.svg)](https://snyk.io/test/github/marshallku/smooth-zoom)\n[![NPM Downloads](https://img.shields.io/npm/dm/smooth-zoom.svg)](https://www.npmjs.com/package/smooth-zoom)\n[![Dependencies](https://img.shields.io/badge/dependencies-0-lightgrey.svg)](https://www.npmjs.com/package/smooth-zoom)\n\nA light weight javascript library for zooming images like Medium, Google Photos and more.\n\n![Zoom example](https://blog.kakaocdn.net/dn/bGIJcB/btqXgnLZRC1/YSa09cEo2qD1ntYCvhCNWK/img.gif)\n\n[👀 Demo](https://smooth-zoom.marshallku.com)\n\n## Install\n\n```bash\n# npm\nnpm i smooth-zoom\n# pnpm\npnpm i smooth-zoom\n# yarn\nyarn add smooth-zoom\n```\n\n## Usage\n\nImport with script tag\n\n```html\n\u003cscript src=\"node_modules/smooth-zoom/dist/zoom.min.js\"\u003e\u003c/script\u003e\n\u003c!-- or --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/smooth-zoom@latest/dist/zoom.min.js\"\u003e\u003c/script\u003e\n```\n\nImport as module\n\n```ts\nimport Zoom from \"smooth-zoom\";\n```\n\nAnd calling it with any css-selector, HTMLElement (or Array of it), and NodeList will make your image zoomed on click.\n\n```ts\n// Css Selector\nZoom(\".zoomable\");\n\n// HTMLElement || HTMLElement[]\nZoom(document.querySelector(\".zoomable\"));\n\nZoom([\n    document.querySelector(\".foo\"),\n    ...document.querySelectorAll(\".zoomable\"),\n]);\n\n// NodeList\nZoom(document.querySelectorAll(\".zoomable\"));\n```\n\nAnd you can simply use this with custom hook in react.\n\n```ts\nimport { useRef } from \"react\";\nimport Zoom from \"smooth-zoom\";\n\nexport default function useZoom() {\n    const zoom = useRef(Zoom());\n\n    return {\n        attach: zoom.current.attach,\n        detach: zoom.current.detach,\n    };\n}\n```\n\nAdd custom hook like above,\n\n```tsx\nimport { ImgHTMLAttributes, useEffect, useRef } from \"react\";\nimport { useZoom } from \"@hooks\";\n\nexport default function ZoomableImage(\n    props: ImgHTMLAttributes\u003cHTMLImageElement\u003e\n) {\n    const { attach, detach } = useZoom();\n    const imageRef = useRef\u003cHTMLImageElement | null\u003e(null);\n\n    useEffect(() =\u003e {\n        const { current: image } = imageRef;\n\n        attach(image);\n\n        return () =\u003e {\n            detach(image);\n        };\n    }, []);\n\n    return \u003cimg {...props} ref={imageRef} /\u003e;\n}\n```\n\nAnd create a component like above.\n\n## Options\n\n```javascript\nZoom(\".zoomable\", {\n    background: \"auto\",\n    onTransitionEnd: (img) =\u003e {\n        img.src = img.src.replace(/-[0-9]+\\.jpg/, \".jpg\");\n    },\n});\n```\n\n| Property        | Type                            | Default             | Description                                                                          |\n| --------------- | ------------------------------- | ------------------- | ------------------------------------------------------------------------------------ |\n| background      | string                          | rgba(0, 0, 0, 0.95) | Image's background color.\u003cbr\u003eUse `auto` to get average color of the image            |\n| useMaximumSize  | boolean                         | true                | Find the longest width through image's natural width and `srcset` attribute          |\n| onClick         | (img: HTMLImageElement) =\u003e void | undefined           | Function that fires on click. Note that img is **original** image element.           |\n| onTransitionEnd | (img: HTMLImageElement) =\u003e void | undefined           | Function that fires after zoom animation. Note that img is **cloned** image element. |\n\n## Methods\n\n### `zoom(img: HTMLImageElement) =\u003e void`\n\nZoom-in an image\n\n```javascript\nconst zoom = Zoom();\n\nzoom.zoom(document.querySelector(\"img\"));\n```\n\n### `attach(target: string | HTMLElement | NodeList | HTMLElement[]) =\u003e void`\n\nMake the target zoomed on click\n\n```javascript\nconst zoom = Zoom(\".zoomable\", {\n    background: \"rgba(0, 0, 0, .3)\",\n});\n\nzoom.attach(\".more-elements\");\n```\n\n### `detach(target: string | HTMLElement | NodeList | HTMLElement[]) =\u003e void`\n\nRemove an event listener from the target\n\n```javascript\nzoom.detach(\".more-elements\");\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarshallku%2Fsmooth-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarshallku%2Fsmooth-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarshallku%2Fsmooth-zoom/lists"}