gooftroop/react-image-magnify

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.

You are awesome! ✨💫

License

MIT

Icons made by Freepik from www.flaticon.com

gooftroop / react-image-magnify

readme