@blacklab/react-image-magnify

A responsive react image zoom component

Usage no npm install needed!

<script type="module">
  import blacklabReactImageMagnify from 'https://cdn.skypack.dev/@blacklab/react-image-magnify';
</script>

README


Magnifying glass

React Image Magnify


A responsive React image zoom component for touch and mouse.

CircleCI



Installation

npm install @blacklab/react-image-magnify

Documentation

View the docs here

Storybook

V2

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