Introduction

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

Getting Started

Start by installing the module

yarn add react-google-photo
# OR with npm
npm install react-google-photo

Usage

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

const images = [...];

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'));

Examples

Photos from the texture collection on Unsplash

The gallery is using the react-photo-gallery npm package

Basic example

Fullscreen example

Options

GooglePhoto

NameTypeDefaultDescription
open*boolControl if GooglePhoto is open or not
src*arrayOf[GooglePhotoSrc]An array containing valid images
srcIndex*numberIndex of source to display
closeOnEscbooltrueIs closable when user press esc key
keyboardNavigationbooltrueEnable left and right arrow navigation
transitionDurationnumber200The duration of the transition, in milliseconds see react-transition-group docs
transitionStylesobjectThe animation object see react-transition-group docs
fullscreenboolfalseShould open on fullscreen mode
mouseIdleTimeoutnumber5000Timeout before hidding the actions buttons when mouse do not move (milliseconds)
onClickPrev*funcFunction called when the previous image is requested
onClickNext*funcFunction called when the next image is requested
onClose*funcFunction called when GooglePhoto is requested to be closed
classes*objectObject of classes to style the element

GooglePhotoSrc

NameTypeDefaultDescription
src*stringUrl of the media
height*numberHeight of the media
width*numberWidth of the media

License

MIT © Léo Pradel