React PhotoSwipe Component
![npm](https://camo.githubusercontent.com/f208efd1148e2eb893ef6cc484ec4ede1678dc86e0e549e75c9f77c2e5210ee4/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64772f72656163742d70686f746f73776970652d636f6d706f6e656e742e737667)
A React component for PhotoSwipe lightbox
Installation
NPM
npm install --save photoswipe react-photoswipe-component
How to Use:
JS:
import { PhotoSwipeGallery } from 'react-photoswipe-component'
import "../node_modules/photoswipe/dist/photoswipe.css"
import "../node_modules/photoswipe/dist/default-skin/default-skin.css"
import "../node_modules/react-photoswipe-component/src/style.css"
const PHOTO_ITEMS = [
{
src: 'http://via.placeholder.com/800x394',
w: 800,
h: 394,
caption: "Test Cap"
},
{
src: 'http://via.placeholder.com/1200x900',
w: 1200,
h: 900,
caption: "Caption 123"
}
];
class SwipePhotoTest extends React.Component {
render() {
return (
<div>
<PhotoSwipeGallery items={PHOTO_ITEMS} />
{/* Or you can try this */}
<PhotoSwipeGallery items={PHOTO_ITEMS}>
Open Gallery
</PhotoSwipeGallery>
</div>
)
}
}
export default SwipePhotoTest
Future Goals:
- Automatic image resizing and responsiveness
- Autoplay
- SEO (Schemas)