happy-ferret / react-intense

A React component for viewing large images up close

react-intense

This component is a port of Intense Image Viewer for use with React.

Demo.

Usage

Simply replace your <img> element with a <ReactIntense> component:

import ReactIntense from 'react-intense'

...

<ReactIntense src='img.jpg' />

Optional Props

Name	Type	Description
title	string	Renders in corner in maximized view.
caption	string	Renders below title in maximized view.
trigger	Component	Option to override the thumbnail image as the trigger to maximize the image. Passed onClick as prop to trigger maximized view.
vertical	boolean	Images lock to scrolling either horizontally (default) or vertically.
moveSpeed	number	How fast to scroll images when following mouse.
loader	string	The class for the loading animation that shows when the image is being loaded for maximized view. Default is in loader.css.

Styling

Feel free to use and/or customize the provided styles in lib/ReactIntense.css.

Issues

If you find any issues with this component, please report them!

Thanks

• Tim Holman
• Paul Irish
• loading.io