React Google Photo
Edit page
react-google-photoreact-google-photoInstallationUsagePropsExamplesLicense

react-google-photo

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

  • Responsive.
  • Keyboard navigation.
  • Easily customizable via props.

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 'react-google-photo/styles.css';
import GooglePhoto from 'react-google-photo';
const App = () => {
  const [open, setOpen] = React.useState(false);
const images = [
    {
      src:
        'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    ...
  ];
  return (
    <div>
      <button onClick={this.handleOpen}>Open</button>
      <GooglePhoto
        open={open}
        src={images}
        onClose={this.handleClose}
      />
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('app'));

Props

open
boolean
required
src
{ src: string; height: number; width: number; alt?: string | undefined; }[]
required
srcIndex
number | undefined
fullscreen
boolean | undefined
keyboardNavigation
boolean | undefined
closeOnEsc
boolean | undefined
mouseIdleTimeout
number | undefined
5000
animationDuration
number | undefined
250
classNames
{ overlay?: string | undefined; image?: string | undefined; animationIn?: string | undefined; animationOut?: string | undefined; } | undefined
onClose
() => void
required
onChangeIndex
((index: number) => void) | undefined

Examples

Photos from the texture collection on Unsplash. The gallery is using the react-photo-gallery npm package.

Basic example

 

Fullscreen example

If you want the slideshow to open in fullscreen mode, add the fullscreen prop.

 

Managed state

By default react-google-photo manage it's own state internally. If you want to manage the state yourself, you need to use the srcIndex and onChangeIndex props. srcIndex represent the index of the current image displayed, and onChangeIndex will be called when the user request to see the next or previous image (either with the keyboard or clicking on the arrows).

 

Custom animation

If you want to change the default animation, you can do so by creating your own css animation. For example if you add the following css to your app you will get the following result:

/* examples/custom-animation.css */
@keyframes customEnterAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes customLeaveAnimation {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
 

License

MIT © Léo Pradel