React Intense: A Modern React Component for Immersive Images

react-intense

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

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!

Download details:

Author: brycedorn
Source: https://github.com/brycedorn/react-intense

License: MIT license

#react