ri

react-intense

A React component for viewing large images up close πŸ”

Showing:

Popularity

Downloads/wk

14

GitHub Stars

158

Maintenance

Last Commit

7mos ago

Contributors

4

Package

Dependencies

2

Size (min+gzip)

5.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-intense

npm version

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

NameTypeDescription
titlestringRenders in corner in maximized view.
captionstringRenders below title in maximized view.
triggerComponentOption to override the thumbnail image as the trigger to maximize the image. Passed onClick as prop to trigger maximized view.
verticalbooleanImages lock to scrolling either horizontally (default) or vertically.
moveSpeednumberHow fast to scroll images when following mouse.
loaderstringThe 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!

Thanks

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100