react-img-zoomer

React Zoom Img

Getting Started

Installation

   npm install react-img-zoomer

Simple Example

<Zoom imgsrc={Image} />

This will include default properties of the Component and renders.

Usage

import Zoom from "react-img-zoomer";
import Image from "./assets/imgs/image.png";

function Example() {
  return (
    <Zoom
      width={150} // width in percent default is 100%
      height={500} // height of the box
      maxwidth={500} // width of the box
      repeat="repeat" // default is no-repeat
      position="center" // cover
      imagesrc={Image} // Image component | URL
      size={200} // it is in percent
      bgsize="cover" // background-size
      cursor="zoom-in" // pointer
      borderpixel={2} // size of border
      bordercolor="red" // color of border
      style={{ margin: "20px" }} // add custom style
      className="img-box" // classname for box
      color="red" // color when image not loaded
    />
  );
}

Default values

key	Value	Guide / What they does
imgsrc	default url	source of Image
height	400	height 400px
width	100	width 100%
maxwidth	400	Width of container
repeat	no-repeat	css bg-repeat property
position	center	css position property
bgsize	cover	css bg property
size	100	How zoomed image should be?
cursor	zoom-in	css cursor property
borderpixel	1	border width
color	#8f8f8f	Color of container
bordercolor	#ddd	Color of border