react-photoswipe-component

WebJar for react-photoswipe-component

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-photoswipe-component
Last Version

Last Version

1.0.13
Release Date

Release Date

Type

Type

jar
Description

Description

react-photoswipe-component
WebJar for react-photoswipe-component
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/GopherLabsLtd/react-photoswipe

Download react-photoswipe-component

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-photoswipe-component/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-photoswipe-component</artifactId>
    <version>1.0.13</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-photoswipe-component/
implementation 'org.webjars.npm:react-photoswipe-component:1.0.13'
// https://jarcasting.com/artifacts/org.webjars.npm/react-photoswipe-component/
implementation ("org.webjars.npm:react-photoswipe-component:1.0.13")
'org.webjars.npm:react-photoswipe-component:jar:1.0.13'
<dependency org="org.webjars.npm" name="react-photoswipe-component" rev="1.0.13">
  <artifact name="react-photoswipe-component" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-photoswipe-component', version='1.0.13')
)
libraryDependencies += "org.webjars.npm" % "react-photoswipe-component" % "1.0.13"
[org.webjars.npm/react-photoswipe-component "1.0.13"]

Dependencies

compile (4)

Group / Artifact Type Version
org.webjars.npm : isomorphic-style-loader jar [4.0.0,5)
org.webjars.npm : photoswipe jar [4.1.2,5)
org.webjars.npm : react jar [16.0.0,17)
org.webjars.npm : webpack jar [3.8.1,4)

Project Modules

There are no modules declared in this project.

React PhotoSwipe Component npm npm

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)
org.webjars.npm

Gopher Labs

Scalable Web/Mobile Application Approaches

Versions

Version
1.0.13