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

V1

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.

You are awesome! ✨💫

License

MIT

Icons made by Freepik from www.flaticon.com