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!