Package Exports

react-content-zoom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-content-zoom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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