react-intense
react-intense copied to clipboard
brycedorn
A React component for viewing large images up close 🔍
react-intense
This component is a port of Intense Image Viewer for use with React.
Demo.
Usage
Simply replace your <img> element with a <ReactIntense> component:
import ReactIntense from 'react-intense'
...
<ReactIntense src='img.jpg' />
Optional Props
| Name | Type | Description |
|---|---|---|
| title | string | Renders in corner in maximized view. |
| caption | string | Renders below title in maximized view. |
| trigger | Component |
Option to override the thumbnail image as the trigger to maximize the image. Passed onClick as prop to trigger maximized view. |
| vertical | boolean | Images lock to scrolling either horizontally (default) or vertically. |
| moveSpeed | number | How fast to scroll images when following mouse. |
| loader | string | The class for the loading animation that shows when the image is being loaded for maximized view. Default is in loader.css. |
Styling
Feel free to use and/or customize the provided styles in lib/ReactIntense.css.
Issues
If you find any issues with this component, please report them!
brycedorn