react-content-zoom

React lightweight stateless component for image zoom on mouse hover.

Designed for e-commerce sites product detail.

Demo

Demo

Status

Installation

npm install --save react-content-zoom

Styles

include this css in your project
...
.zoomed-image {
   background-size: cover;
   cursor: pointer;
}
...

Usage

import ContentZoom from 'react-content-zoom';
...
<ContentZoom zoomPercent={350}
             largeImageUrl="./static/img.jpg"
             imageUrl="./static/img_small.jpg"
             contentHeight={300}
             contentWidth={500} />
...
You can put some content inside if you need
...
<ContentZoom zoomPercent={350}
             largeImageUrl="./static/img.jpg"
             imageUrl="./static/img_small.jpg"
             contentHeight={300}
             contentWidth={500}><h1>Put your content here!</h1></ContentZoom>
...

Support any content inside your image container.

Props API

| Prop | Type | Required | Default | Description | |-------------------------------|--------|----------|---------|------------------------------------------------------------| | zoomPercent | Number | No | 250 | Small image url | | largeImageUrl | String | Yes | | Large image url | | imageUrl | String | Yes | | Small image url | | contentWidth | Number | No | 100% | Style applied to image container | | contentHeight | Number | No | 100% | Style applied to image container |

Support

Please open an issue.

Development

git clone https://github.com/eubash/react-content-zoom.git
cd react-content-zoom
npm install
npm run #See available commands

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

License

MIT