0.2.2 • Published 5 months ago
react-intense v0.2.2
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!
Thanks
0.2.1
6 months ago
0.2.0
6 months ago
0.2.2
5 months ago
0.1.11
2 years ago
0.1.12
2 years ago
0.1.13
2 years ago
0.1.14
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.2
6 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
8 years ago
0.0.4
8 years ago
0.0.3
8 years ago
0.0.2
8 years ago
0.0.1
8 years ago