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!
Author: brycedorn
Source: https://github.com/brycedorn/react-intense
License: MIT license