Photo Browser React Component

Examples

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      photos: [
        {
          url: 'img/beach.jpg',
          caption: 'Amazing beach in Goa, India',
        },
        'http://placekitten.com/1024/1024',
        'img/lock.jpg',
        {
          url: 'img/monkey.jpg',
          caption: 'I met this monkey in Chinese mountains',
        },
        {
          url: 'img/mountains.jpg',
          caption: 'Beautiful mountains in Zhangjiajie, China',
        },
      ],
    }
  }
  render() {
    return (
      <Page>
        <Navbar title="Photo Browser"></Navbar>

        <Block>
          <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
          <Row>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                ref={(el) => {this.standalone = el}}
              />
              <Button raised onClick={() => this.standalone.open()}>Standalone</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                type="popup"
                ref={(el) => {this.popup = el}}
              />
              <Button raised onClick={() => this.popup.open()}>Popup</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                type="page"
                backLinkText="Back"
                ref={(el) => {this.page = el}}
              />
              <Button raised onClick={() => this.page.open()}>Page</Button>
            </Col>
          </Row>
        </Block>

        <Block>
          <p>Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
          <Row>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                theme="dark"
                ref={(el) => {this.standaloneDark = el}}
              />
              <Button raised onClick={() => this.standaloneDark.open()}>Standalone</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                theme="dark"
                type="popup"
                ref={(el) => {this.popupDark = el}}
              />
              <Button raised onClick={() => this.popupDark.open()}>Popup</Button>
            </Col>
            <Col>
              <PhotoBrowser
                photos={this.state.photos}
                theme="dark"
                type="page"
                backLinkText="Back"
                ref={(el) => {this.pageDark = el}}
              />
              <Button raised onClick={() => this.pageDark.open()}>Page</Button>
            </Col>
          </Row>
        </Block>
      </Page>
    );
  }
};