Skip to content

brycedorn/react-intense

Repository files navigation

react-intense

npm version Build and Deploy

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