Gathering detailed insights and metrics for react-image-zoom-hook
Gathering detailed insights and metrics for react-image-zoom-hook
Gathering detailed insights and metrics for react-image-zoom-hook
Gathering detailed insights and metrics for react-image-zoom-hook
@c1495616js/react-json-hook-form
#### Features:
react-photo-editor
React component and hook for image editing, offering controls for brightness, contrast, saturation, and grayscale, along with features to rotate, flip, pan, draw, and zoom photos.
use-free-scale
useFreeScale is a lightweight and high-performance custom React Hook that provides the functionality of free scaling and dragging (compatible with mobile touch events) on HTML elements. It uses touchpad two-finger zoom and mouse dragging for scaling and m
npm install react-image-zoom-hook
Typescript
Module System
Min. Node Version
Node Version
NPM Version
TypeScript (67.84%)
CSS (21.14%)
JavaScript (9.28%)
HTML (1.75%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
8 Stars
33 Commits
2 Watchers
39 Branches
1 Contributors
Updated on Mar 04, 2023
Latest Version
0.1.13
Package Id
react-image-zoom-hook@0.1.13
Unpacked Size
114.22 kB
Size
22.98 kB
File Count
10
NPM Version
6.10.3
Node Version
12.10.0
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
20
If using npm, Run
1 2npm install --save react-image-zoom-hook 3
If using yarn , Run
1 2yarn add react-image-zoom-hook 3
1<> 2 <div onMouseMove={moveLens} style={{ ...imgContainerDimesions }}> 3 <div ref={meshRefCallback} style={{ ...lensDimensions }} /> 4 5 <img 6 style={{ 7 ...imgDimesions 8 }} 9 ref={imgRefCallback} 10 alt="test" 11 src={img} 12 /> 13 </div> 14 15 <div style={{ ...previewLensDimensions }}> 16 <img 17 ref={imagePreviewRefCallback} 18 alt="test-preview" 19 src={previewImg} 20 style={{ 21 ...previewImgDimensions 22 }} 23 /> 24 </div> 25</>
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/** 2 3* Example of default view 4 5*/ 6import React from "react"; 7import useImageZoom from "react-image-zoom-hook"; 8 9function DefaultZoomApp() { 10 /** 11 12* Necessary inputs for useImageZoomHook 13 14*/ 15 16 /** 17 18* The ratio of lens height and width on main image and the zoom image also 19 20* should remain same for correct working. 21 22*/ 23 24 const imgHeight = 600; 25 26 const imgWidth = 500; 27 28 const lensHeight = 100; 29 30 const lensWidth = 100; 31 32 const previewLensHeight = 600; 33 34 const img = 35 "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=50"; 36 37 const previewImg = 38 "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=90"; 39 40 const { DefaultView } = useImageZoom({ 41 imgHeight, 42 43 imgWidth, 44 45 lensHeight, 46 47 lensWidth, 48 49 previewLensHeight, 50 51 img, 52 53 previewImg 54 }); 55 56 /** 57 58* Two images are involved here, user need to have a actual image and 59 60* one good quality image with higher resolution 61 62*/ 63 64 return <div className="container">{DefaultView}</div>; 65}
1/** 2 3 * Example of customised zooming 4 5*/ 6import React from "react"; 7import useImageZoom from "react-image-zoom-hook"; 8 9function AppWithZoomCustomization() { 10 /** 11 12* Necessary inputs for useImageZoomHook 13 14*/ 15 16 /** 17 18* The ratio of lens height and width on main image and the zoom image also 19 20* should remain same for correct working. 21 22*/ 23 24 const imgHeight = 600; 25 26 const imgWidth = 500; 27 28 const lensHeight = 100; 29 30 const lensWidth = 100; 31 32 const previewLensHeight = 600; 33 34 const img = 35 "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=50"; 36 37 const previewImg = 38 "https://rukminim1.flixcart.com/image/880/1056/jw6pifk0/t-shirt/e/v/z/m-61ywn-lewel-original-imafgxd7dfg7uub2.jpeg?q=90"; 39 40 const { 41 moveLens, 42 43 imgDimesions, 44 45 lensDimensions, 46 47 previewLensDimensions, 48 49 previewImgDimensions, 50 51 imgContainerDimesions, 52 53 imgRefCallback, 54 55 meshRefCallback, 56 57 imagePreviewRefCallback 58 } = useImageZoom({ 59 imgHeight, 60 61 imgWidth, 62 63 lensHeight, 64 65 lensWidth, 66 67 previewLensHeight, 68 69 img, 70 71 previewImg 72 }); 73 74 /** 75 76* Two images are involved here, user need to have a actual image and 77 78* one good quality image with higher resolution 79 80*/ 81 82 return ( 83 <div className="container"> 84 <div 85 className="img-main-container" 86 onMouseMove={moveLens} 87 style={{ 88 ...imgContainerDimesions 89 }} 90 > 91 <div 92 ref={meshRefCallback} 93 className="mesh" 94 style={{ 95 ...lensDimensions 96 }} 97 /> 98 99 <img 100 style={{ 101 ...imgDimesions 102 }} 103 ref={imgRefCallback} 104 alt="test" 105 src={img} 106 /> 107 </div> 108 109 <div 110 className="img-preview-section-container" 111 // ref={imagePreviewRefContainer} 112 113 style={{ 114 ...previewLensDimensions 115 }} 116 > 117 <img 118 ref={imagePreviewRefCallback} 119 alt="test-preview" 120 src={previewImg} 121 style={{ 122 ...previewImgDimensions 123 }} 124 className="img-preview-section" 125 /> 126 </div> 127 </div> 128 ); 129} 130 131/** 132 133* Try to use both the types of image zoom 134 135* DefaultZoomApp : where you get the default zoom UI and also customizable 136 137* AppWithZoomCustomization: where user want to take control of different ui elements 138 139*/ 140 141ReactDOM.render(<AppWithZoomCustomization />, document.getElementById("root"));
Type interface
1 2yarn run test 3
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
simbathesailorPurpleBooth
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
Thanks goes to these wonderful people (emoji key):
Anil kumar Chaudhary 💻 🤔 🎨 📖 🐛 |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
142 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More