1.0.3 • Published 6 years ago
react-content-zoom v1.0.3
react-content-zoom
React lightweight stateless component for image zoom on mouse hover.
Designed for e-commerce sites product detail.
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