Skip to content
React lightbox component using the google photo style
JavaScript CSS
Branch: master
Clone or download
Latest commit c3757ff May 8, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs
scripts
src
.babelrc
.gitignore
.prettierignore
LICENSE
README.md
package.json
rollup.config.js
yarn.lock

README.md

react-google-photo

npm version CircleCI

react-google-photo is a responsive lightbox React Component for displaying photos that implements the google photo style.

Docs and examples

You can find the docs and live examples here.

Installation

With npm:

npm install react-google-photo --save

Or with yarn:

yarn add react-google-photo

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import GooglePhoto from 'react-google-photo';

const images = [
  {
    src: 'url-of-your-image',
    width: 749, // width of your image
    height: 1000, // height of your image
  },
  {
    ...
  }
];

export default class App extends React.Component {
  state = {
    index: 0,
    open: false,
  };

  handleClickPrev = () => {
    this.setState({ index: this.state.index - 1 });
  };

  handleClickNext = () => {
    this.setState({ index: this.state.index + 1 });
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { open } = this.state;
    return (
      <div>
        <button onClick={this.handleOpen}>Open</button>
        <GooglePhoto
          open={open}
          src={images}
          srcIndex={index}
          onClickPrev={this.handleClickPrev}
          onClickNext={this.handleClickNext}
          onClose={this.handleClose}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Options

You can find the options here.

License

MIT © Léo Pradel

You can’t perform that action at this time.