This component is a port of Intense Image Viewer for use with React. Now with hooks!
Demo.
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()}
</>
);
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. |
Feel free to use and/or customize the provided styles in dist/ReactIntense.css
.
If you find any issues with this component, please report them!