Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simbathesailor/react-image-zoom-hook
A customisable Reactjs hook for image zoom :corn:
https://github.com/simbathesailor/react-image-zoom-hook
image image-zoom react-hooks reactjs
Last synced: 3 months ago
JSON representation
A customisable Reactjs hook for image zoom :corn:
- Host: GitHub
- URL: https://github.com/simbathesailor/react-image-zoom-hook
- Owner: simbathesailor
- License: mit
- Created: 2019-09-22T16:36:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T07:49:11.000Z (about 2 years ago)
- Last Synced: 2024-10-07T22:09:37.499Z (5 months ago)
- Topics: image, image-zoom, react-hooks, reactjs
- Language: TypeScript
- Homepage: https://codesandbox.io/s/young-snow-vbonz
- Size: 12.8 MB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Image zoom react hook
 [](https://badge.fury.io/js/react-image-zoom-hook)
### Installing
If using npm, Run
```javascript
npm install --save react-image-zoom-hook
```
If using yarn , Run
```javascript
yarn add react-image-zoom-hook
```
## Getting Started
To understand the usage, Let's look at the jsx used to render the above example shown in gif. The jsx structure will remain more or less same of various implementation.
```jsx
<>
>
```
Let's see the visual reperesentation of the layout described above in jsx
Following are the segregation of properties based on different element
| Element | Attributes returned by Hook |
| --------------- | --------------------------------------------- |
| Image Container | moveLens, imgContainerDimesions |
| Lens or Mesh | lensDimensions, meshRefCallback |
| Image | imgDimesions, imgRefCallback |
| Preview Image | imagePreviewRefCallback, previewImgDimensions |
| Preview Lens | previewLensDimensions |
Customisation:
1. It is fully customisable, as implementing component is in consumer's control.
2. Any custom styling can be applied to all the elements mentioned in above table.
### Live Example
[Example customized zoom](https://codesandbox.io/s/young-snow-vbonz)
## Default Zoom
```jsx
/**
* Example of default view
*/
import React from "react";
import useImageZoom from "react-image-zoom-hook";
function DefaultZoomApp() {
/**
* Necessary inputs for useImageZoomHook
*/
/**
* The ratio of lens height and width on main image and the zoom image also
* should remain same for correct working.
*/
const imgHeight = 600;
const imgWidth = 500;
const lensHeight = 100;
const lensWidth = 100;
const previewLensHeight = 600;
const img =
"https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=50";
const previewImg =
"https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=90";
const { DefaultView } = useImageZoom({
imgHeight,
imgWidth,
lensHeight,
lensWidth,
previewLensHeight,
img,
previewImg
});
/**
* Two images are involved here, user need to have a actual image and
* one good quality image with higher resolution
*/
return
{DefaultView};
}
```
## Customised Zoom
```jsx
/**
* Example of customised zooming
*/
import React from "react";
import useImageZoom from "react-image-zoom-hook";
function AppWithZoomCustomization() {
/**
* Necessary inputs for useImageZoomHook
*/
/**
* The ratio of lens height and width on main image and the zoom image also
* should remain same for correct working.
*/
const imgHeight = 600;
const imgWidth = 500;
const lensHeight = 100;
const lensWidth = 100;
const previewLensHeight = 600;
const img =
"https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=50";
const previewImg =
"https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=90";
const {
moveLens,
imgDimesions,
lensDimensions,
previewLensDimensions,
previewImgDimensions,
imgContainerDimesions,
imgRefCallback,
meshRefCallback,
imagePreviewRefCallback
} = useImageZoom({
imgHeight,
imgWidth,
lensHeight,
lensWidth,
previewLensHeight,
img,
previewImg
});
/**
* Two images are involved here, user need to have a actual image and
* one good quality image with higher resolution
*/
return (
);
}
/**
* Try to use both the types of image zoom
* DefaultZoomApp : where you get the default zoom UI and also customizable
* AppWithZoomCustomization: where user want to take control of different ui elements
*/
ReactDOM.render(, document.getElementById("root"));
```
Type interface
[Gist for types above](https://gist.github.com/simbathesailor/66e1a8db597703f2a34868998c3d9f91)
## Running the tests
```javascript
yarn run test
```
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
## Authors
[simbathesailor](https://github.com/simbathesailor)
See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
