react-intense

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

Demo.

Usage

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

import ReactIntense from 'react-intense'

...

<ReactIntense src='img.jpg' />

Or for more flexibility, use the provided useIntenseMaximize hook:

import { useIntenseMaximize } from 'react-intense'

...

const { maximize, renderViewer } = useIntenseMaximize(props);

return (
  <>
    <button onClick={maximize}>Maximize!</button>
    {renderViewer()}
  </>
);

Optional Props

| Name | Type | Description | | --- | --- | --- | | title | string | Renders in corner in maximized view. | | caption | string | Renders below title in maximized view. | | vertical | boolean | Images lock to scrolling either horizontally (default) or vertically. | | moveSpeed | number | How fast to scroll images when following mouse. | | loader | React.ReactNode | The loading spinner to use. |

Styling

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

Issues

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

Thanks

• Tim Holman
• Paul Irish
• loading.io