Package Exports

react-google-photo

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-google-photo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Documentation

📚 You can find the docs and live examples here.

Getting started
- Installation
- Usage
- Props
- Licence

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

Check the documentation: https://react-google-photo.leopradel.com/#props.