node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

react-intense

react-intense

npm version MIT

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' />

and you're good to go!

Additional Props

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):

<ReactIntense src='img.jpg' loader='uil-spin-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