Package Exports

@blacklab/react-image-magnify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@blacklab/react-image-magnify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-image-magnify

A responsive React image zoom component for touch and mouse.

Designed for shopping site product detail.

Features Include:

In-place and side-by-side image enlargement
Positive or negative space guide lens options
Interaction hint
Configurable enlarged image dimensions
Optional enlarged image external render
Hover and click intent
Long-press gesture
Fade transitions

Status

Documentation

Peer Dependencies

React 17

Installation

npm install @blacklab/react-image-magnify

Usage

import ReactImageMagnify from 'react-image-magnify';
...
<ReactImageMagnify {...{
    imageProps: {
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg300
    },
    magnifiedImageProps: {
        src: watchImg1200,
        width: 1200,
        height: 1800
    }
}} />
...

For more usage, see the Storybook

Support

Please open an issue.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

Development

git clone https://github.com/gooftroop/react-image-magnify.git
cd react-image-magnify
npm install
npm run storybook

Attribution

Thanks to the following community members for opening Issues and Pull Requests.

@damien916
@colepatrickturner
@andreatosatto90
@nathanziarek
@hombrew
@smashercosmo
@sk1e
@vidries
@ionutzp
@sbloedel
@spiderbites
@Akarshit
@eddy20vt
@evannoronha
@benjaminadk
@nilsklimm
@m4recek
@yaser-ali-vp
@carlgunderson
@tojvan
@kskonecka
@Coriou @gooftroop

You are awesome! ✨💫

License

MIT