Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (65 sloc) 1.85 KB
import * as React from 'react';
import Gallery from 'react-photo-gallery';
import * as GooglePhoto from 'react-google-photo';
// https://unsplash.com/collections/589374/textures
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,
},
{
src:
'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 666,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1491146179969-d674118945ff?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 1500,
height: 844,
},
];
interface State {
index: number;
open: boolean;
}
export class Example extends React.Component<{}, State> {
state = {
index: 0,
open: false,
};
handleClickPrev = () => {
this.setState({ index: this.state.index - 1 });
};
handleClickNext = () => {
this.setState({ index: this.state.index + 1 });
};
handleClose = () => {
this.setState({ open: false });
};
handleClickGallery = (e: any, data: any) => {
this.setState({ open: true, index: data.index });
};
render() {
const { open, index } = this.state;
return (
<React.Fragment>
<Gallery photos={images} onClick={this.handleClickGallery} />
<GooglePhoto
open={open}
src={images}
srcIndex={index}
onClickPrev={this.handleClickPrev}
onClickNext={this.handleClickNext}
onClose={this.handleClose}
/>
<a href="https://github.com/pradel/react-google-photo/blob/master/docs/src/components/Example.tsx">
Source code
</a>
</React.Fragment>
);
}
}
You can’t perform that action at this time.