@computeruniverse/react-magnifier NPM

@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.