Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-imagezoomable
Advanced tools
wrapper to open an image in full screen and move inside with mouse and touch
npm install react-imagezoomable
You can find a good example on stoneisland30 You can find my storybook on https://multivoltage.github.io/react-imagezoomable/
import { ImageZoomable } from 'react-imagezoomable'
// options not required
const options = {
preloadHDtime: false,
placeHolderInside: true,
iconZoomInEnable: true,
percBigger: 25,
}
const fullImgAttr = {
srcSet: `ball.jpg 320w, ballBig.jpg 480w`,
sizes: `(max-width: 320px) 280px, (max-width: 480px) 440px, 800px`,
src: `ball.jpg`,
alt: `this is cool`,
// you can put other attributes...
}
<ImageZoomable imageAttr={fullImgAttr} options={options}>
<img src="ball.jpg" sizes="(max-width: 320px) 280px" src-set="ball.jpg 320w"/>
</ImageZoomable>
preloadHDtime
default = 0
It defines how much time in millisecond the component will wait before load a not visible version of full screen image. This can be useful is site host a large images (some megabytes), because probably when user click on the image, the full version is already loaded and user will not wait 10 second to download the image (thanks to cache)
storybook-example
placeHolderInside
default is false
it defines if the colored loading will be inside the small image or cover the full screen window
storybook-example
renderCustomPlaceholder
undefined
if this function is provided, the component will render a custom placeholder instead the original colored loading
storybook-example
iconZoomInEnable
default is false
it defines if at the top-right corner of small image a zoom-in icon will be draw
storybook-example
percBigger
default is 10
storybook-example
debug
default = false
if true you can see a red line in full screen image. This is useful for development
<ImageZoomable>
is only a wrapper around basic <img>
tagsrcset
and sizes
both for small image and fullscreen imagepreloadHDtime
prop introducedplaceHolderInside
prop introducediconZoomInEnable
prop introducesif you have installed this library version under 0.3.0, you have to specify hqWidth and hqHeight like this:
FAQs
wrapper to open an image in full screen and move inside with mouse and touch
We found that react-imagezoomable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.