React lightbox component
Thanks to the generous time and effort contributed by @webcarrot, react-image-lightbox
now works with mobile browsers, supporting pinch to zoom and swipe.
With the onImageLoadError
prop, you can assign a callback function to be called whenever an image fails to load. Many thanks to @satya-dash for the PR!
You can now add captions to images by using the imageCaption
prop, thanks to @c00kiemon5ter. The usage is the same as the imageTitle
prop.
left
and top
to transform
and translate
reactModalStyle
propenableZoom
to allow disabling of zoom functionalityril-
prefix to class names and add deprecation notice for old ones. Fixes #15Enable image pan with touch events
With the upgrade to React 15.2.0, warnings are thrown whenever unrecognized props are given to DOM elements. Some users, myself included, were seeing warnings whenever developing (See #10). One of those warnings was for the portal component I had made, which has now been replaced (see react-modal note below). The other was for Radium (see Radium note below), which I was using for styling the component without requiring developers to include an external stylesheet.
I replaced Portal.js, my custom component to solve z-index issues, with the more complete react-modal component. This is the primary reason for bumping the version up to 3, as while the underlying ideas are the same as before (append children to the end of the document body, set z-index to 1000), I'm not confident enough in my knowledge of the workings of react-modal to say that the component will be displayed exactly as it was before. In my own projects, however, I have had no issues after the update. react-modal also comes with the (behavior-changing) benefit of confining the tab key targets to the modal contents.
Radium's developers are aware of the react warnings issue, but progress on the ticket was slow, and in the interest of more natural style handling and fewer dependencies, I decided to change back to CSS inlined via Webpack's style-loader.
Webpack has some handy features like hot loading of react components and inlining CSS in code with style-loader, so I decided to abandon the gulp config I had been using.