React Inner Image Zoom v1.3.0
- Package
react-inner-image-zoom
- Source code
Open repo on GitHub
- Changelog
Open changelog on GitHub
Installation
NPM
Yarn
TypeScript
Styling
You can download the raw styles.css file or, if your build supports it, import the stylesheet directly from node_modules using:
Usage
Import and render the component:
Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | Required. URL for the original image. | |
| srcSet | string | Default srcset attribute for a responsive original image. | |
| sizes | string | Default sizes attribute for use with srcset. | |
| sources | array | A list of image sources for using the picture tag to serve the appropriate original image (see below for more details). | |
| zoomSrc | string | URL for the larger zoom image. Falls back to original image src if not defined. | |
| zoomScale | number | 1 | Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%). |
| startsActive | boolean | false | If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave. |
| alt | string | Alternative text for the original image. | |
| moveType | "pan" | "drag" | pan | The user behavior for moving zoomed images on non-touch devices. |
| zoomType | "click" | "hover" | click | The user behavior for triggering zoom. When using hover, combine with zoomPreload to avoid flickering on rapid mouse movements. |
| fadeDuration | number | 150 | Fade transition time in milliseconds. If zooming in on transparent images, set this to 0 for best results. |
| fullscreenOnMobile | boolean | false | Enables fullscreen zoomed image on touch devices below a specified breakpoint. |
| mobileBreakpoint | number | 640 | The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true. |
| className | string | Custom classname for styling the component. | |
| afterZoomIn | () => void | Function to be called after zoom in. | |
| afterZoomOut | () => void | Function to be called after zoom out. |
Sources
This prop accepts an array of objects which it uses to create a picture tag and source elements. The component looks for the following optional properties and you can find additional details on responsive images here:
| Name | Type | Default | Description |
|---|---|---|---|
| srcSet | string | Srcset attribute for source tag. | |
| sizes | string | Sizes attribute for source tag. | |
| media | string | An attribute containing a media condition for use with the srcset. | |
| type | string | An image MIME type. This is useful for using newer formats like WebP. |