react-img-zoomer v1.0.3

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