react-intense

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

Usage

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

import ReactIntense from 'react-intense'

...

<ReactIntense src='img.jpg' />

and you're good to go!

Title/caption:

<ReactIntense caption='caption' src='img.pg' title='title' />

Thumbnail image (for lazy loading of main image):

<ReactIntense src='large_version.jpg' thumbnail='small_version.jpg' />

Trigger (override thumbnail image):

If you'd like to completely override the thumbnail image as the trigger for maximizing the image, you may pass in an entire React element.
It must accept an onClick prop in addition to the generic className, ref, and style props.

<ReactIntense src='large_version.jpg' trigger={myTrigger} />

Vertical scrolling:

<ReactIntense src='tall_img.jpg' vertical=true />

Scroll speed (default is 0.05):

<ReactIntense src='img.jpg' moveSpeed=0.05 />

Loading indicator (default is none):

Requires some CSS for positioning and associated div structure; demo shows the spin loader from loading.io which is bundled in loader.css.

<ReactIntense src='img.jpg' loader='uil-spin-css' />

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

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