@computeruniverse/react-magnifier

Description

A simple and lightweight side-by-side Magnifier

Demo

https://computeruniverse-oss.github.io/react-magnifier

Usage

Install the package

Yarn

yarn add @computeruniverse/react-magnifier

NPM

npm install @computeruniverse/react-magnifier

Add the component to your React application:

import Magnifier from "@computeruniverse/react-magnifier";

<Magnifier
    zoomImg={'https://picsum.photos/id/190/1000/1000'}
    zoomImgHeight={1000}
    zoomImgWidth={1000}
    offsetLeft={10}
    >
    <img src={'https://picsum.photos/id/190/400/400'} height={400} width={400} alt="Lorem picsum " />
</Magnifier>

Props

| Name | Type | Default | Description | |--------------|-----------------------------------|---------|-------------| |zoomImg | string(required) | | Path to the "Big"-Image that is used for the zoom | |zoomImgWidth | number(required) | | "Big"-Image width | |zoomImgHeight | number(required) | | "Big"-Image height| |offsetTop | number | 0 | top offset for the Zoom Portal | |offsetLeft | number | 0 | left offset for the Zoom Portal |

Development

Requirements: Node.js, Yarn

1. Clone this repository: git clone https://github.com/computeruniverse-oss/react-magnifier.git
2. Install all dependencies: yarn install
3. Start storybook yarn storybook so that you have a place where you can test your stuff.

Contributing

Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.