A React component to zoom to a larger image within it's existing container.
Check out the demo here by hovering over the image. Note on devices without hover support you'll just see a static image.
yarn add react-simple-zoom
or
npm install react-simple-zoom
<SimpleZoom
thumbUrl={'http://via.placeholder.com/480x640'}
fullUrl={'http://via.placeholder.com/960x1280'}
zoomScale={3.6}
onEnterCallback={() => { /* Do something on mouseenter */ }}
onExitCallback={() => { /* Do something on mouseout */ }}
onExitTimeout={2000}
/>Pass through a URL that will be the initial thumbnail image. This will also be the fallback used by devices without hover support.
This simply renders an <img> tag so most image formats will be fine.
URL for higher resolution image that will be zoomed into. This is preloaded when the component mounts to avoid a delay on hover.
This renders as a CSS background image, so again most formats should work fine.
How many times you want the image to be magnified. Defaults to 2.4x.
Pass a function that will be called when the user's begins hovering over the component.
Pass a function that will be called when the user stops hovering over the component.
Pass a delay in milliseconds for the exit callback. The exit callback will only be called if the user hovers over the component for longer than this delay. Useful for firing analytics events based on genuine interaction with the component.
Please log any issues or bugs on the Github issues tab above, and feel free to contribute by opening a Pull Request.