React Image Magnify

A responsive React image zoom component for touch and mouse.

Installation

---

npm install @blacklab/react-image-magnify

Documentation

---

View the docs here

Storybook

React Image Magnify is a React Component library that provides

• 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

Example 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
    }}
/>

Changes

---

Detailed release notes for a given version can be found on our releases page.

Support

---

Please open an issue.

Contributing

---

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

Getting Started

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

Contributors

---

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