https://github.com/pradel/react-google-photo
React lightbox component using the google photo style
https://github.com/pradel/react-google-photo
lightbox react responsive
Last synced: about 1 year ago
JSON representation
React lightbox component using the google photo style
- Host: GitHub
- URL: https://github.com/pradel/react-google-photo
- Owner: pradel
- License: mit
- Created: 2017-11-11T12:28:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T07:47:27.000Z (over 3 years ago)
- Last Synced: 2025-03-28T18:21:17.640Z (over 1 year ago)
- Topics: lightbox, react, responsive
- Language: TypeScript
- Homepage: https://react-google-photo.leopradel.com/
- Size: 2.9 MB
- Stars: 18
- Watchers: 2
- Forks: 7
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-google-photo
[](https://www.npmjs.com/package/react-google-photo)
[](https://www.npmjs.com/package/react-google-photo)
[](https://github.com/pradel/react-google-photo/blob/master/LICENSE)
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](https://react-google-photo.leopradel.com/).
- [Getting started](https://react-google-photo.leopradel.com/)
- [Installation](https://react-google-photo.leopradel.com/#installation)
- [Usage](https://react-google-photo.leopradel.com/#usage)
- [Props](https://react-google-photo.leopradel.com/#props)
- [Licence](https://react-google-photo.leopradel.com/#license)
## Installation
With npm:
```
npm install react-google-photo --save
```
Or with yarn:
```
yarn add react-google-photo
```
## Usage
```javascript
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 (
Open
setOpen(false)}
/>
);
};
ReactDOM.render(, document.getElementById('app'));
```
## Props
Check the documentation: https://react-google-photo.leopradel.com/#props.
## License
MIT © [Léo Pradel](https://www.leopradel.com/)