A React component for viewing large images up close πŸ”
Branch: master
Clone or download
Latest commit 4b74512 Feb 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client fix uglifyjs Sep 26, 2017
dist rm log Feb 24, 2018
lib fix spaces Feb 24, 2018
.babelrc add some babel plugins/presets Feb 24, 2018
.flowconfig add some flow typing Feb 7, 2018
.gitignore Merge branch 'master' of github.com:brycedorn/react-intense Sep 26, 2017
LICENSE add loading indicator Mar 18, 2017
README.md clean up readme a bit πŸ’« Feb 24, 2018
package.json add some babel plugins/presets Feb 24, 2018
yarn.lock add some babel plugins/presets Feb 24, 2018

README.md

react-intense

npm version MIT

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!

Thanks