Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marshallku/smooth-zoom
A light weight javascript library for zooming images.
https://github.com/marshallku/smooth-zoom
image picture typescript zoom zoom-images
Last synced: about 2 months ago
JSON representation
A light weight javascript library for zooming images.
- Host: GitHub
- URL: https://github.com/marshallku/smooth-zoom
- Owner: marshallku
- License: mit
- Created: 2021-02-12T11:59:38.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-12-08T03:01:11.000Z (2 months ago)
- Last Synced: 2024-12-08T04:16:45.842Z (2 months ago)
- Topics: image, picture, typescript, zoom, zoom-images
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/smooth-zoom
- Size: 12.2 MB
- Stars: 19
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Smooth Zoom
[](https://www.npmjs.com/package/smooth-zoom)
[](https://www.npmjs.com/package/smooth-zoom)
[](https://snyk.io/test/github/marshallku/smooth-zoom)
[](https://www.npmjs.com/package/smooth-zoom)
[](https://www.npmjs.com/package/smooth-zoom)
A light weight javascript library for zooming images like Medium, Google Photos and more.
[👀 Demo](https://smooth-zoom.marshallku.com)
## Install
```bash
# npm
npm i smooth-zoom
# pnpm
pnpm i smooth-zoom
# yarn
yarn add smooth-zoom
```
## Usage
Import with script tag
```html
```
Import as module
```ts
import Zoom from "smooth-zoom";
```
And calling it with any css-selector, HTMLElement (or Array of it), and NodeList will make your image zoomed on click.
```ts
// Css Selector
Zoom(".zoomable");
// HTMLElement || HTMLElement[]
Zoom(document.querySelector(".zoomable"));
Zoom([
document.querySelector(".foo"),
...document.querySelectorAll(".zoomable"),
]);
// NodeList
Zoom(document.querySelectorAll(".zoomable"));
```
And you can simply use this with custom hook in react.
```ts
import { useRef } from "react";
import Zoom from "smooth-zoom";
export default function useZoom() {
const zoom = useRef(Zoom());
return {
attach: zoom.current.attach,
detach: zoom.current.detach,
};
}
```
Add custom hook like above,
```tsx
import { ImgHTMLAttributes, useEffect, useRef } from "react";
import { useZoom } from "@hooks";
export default function ZoomableImage(
props: ImgHTMLAttributes
) {
const { attach, detach } = useZoom();
const imageRef = useRef(null);
useEffect(() => {
const { current: image } = imageRef;
attach(image);
return () => {
detach(image);
};
}, []);
return ![]()
;
}
```
And create a component like above.
## Options
```javascript
Zoom(".zoomable", {
background: "auto",
onTransitionEnd: (img) => {
img.src = img.src.replace(/-[0-9]+\.jpg/, ".jpg");
},
});
```
| Property | Type | Default | Description |
| --------------- | ------------------------------- | ------------------- | ------------------------------------------------------------------------------------ |
| background | string | rgba(0, 0, 0, 0.95) | Image's background color.
Use `auto` to get average color of the image |
| useMaximumSize | boolean | true | Find the longest width through image's natural width and `srcset` attribute |
| onClick | (img: HTMLImageElement) => void | undefined | Function that fires on click. Note that img is **original** image element. |
| onTransitionEnd | (img: HTMLImageElement) => void | undefined | Function that fires after zoom animation. Note that img is **cloned** image element. |
## Methods
### `zoom(img: HTMLImageElement) => void`
Zoom-in an image
```javascript
const zoom = Zoom();
zoom.zoom(document.querySelector("img"));
```
### `attach(target: string | HTMLElement | NodeList | HTMLElement[]) => void`
Make the target zoomed on click
```javascript
const zoom = Zoom(".zoomable", {
background: "rgba(0, 0, 0, .3)",
});
zoom.attach(".more-elements");
```
### `detach(target: string | HTMLElement | NodeList | HTMLElement[]) => void`
Remove an event listener from the target
```javascript
zoom.detach(".more-elements");
```