Photo Browser React Component

    Photo Browser is an photo browser component to display collection of photos / images. Photos can be zoomed and panned (optional).

    Photo Browser React component doesn’t render any output. It can be used to create JS Photo Browser instance and control it inside of your React component.

    • / **F7PhotoBrowser**

    Photo Browser Properties

    You can pass all parameters in single params property or use separate props for each parameter to specify them via component properties:

    Photo Browser Methods

    You can access Photo Browser initialized instance by accessing **.f7PhotoBrowser** component’s property.

    Examples

    1. export default class extends React.Component {
    2.   constructor(props) {
    3.     super(props);
    4.     this.state = {
    5.       photos: [
    6.         {
    7.           url: 'img/beach.jpg',
    8.           caption: 'Amazing beach in Goa, India',
    9.         },
    10.         'http://placekitten.com/1024/1024',
    11.         'img/lock.jpg',
    12.         {
    13.           url: 'img/monkey.jpg',
    14.           caption: 'I met this monkey in Chinese mountains',
    15.         },
    16.         {
    17.           url: 'img/mountains.jpg',
    18.           caption: 'Beautiful mountains in Zhangjiajie, China',
    19.         },
    20.       ],
    21.     }
    22.   }
    23.   render() {
    25.       <Page>
    27.         <Block>
    28.           <p>Photo Browser could be opened in a three ways - as a Standalone component (Popup modification), in Popup, and as separate Page:</p>
    29.           <Row>
    30.             <Col>
    31.               <PhotoBrowser
    32.                 photos={this.state.photos}
    33.                 ref={(el) => {this.standalone = el}}
    34.               />
    35.               <Button raised onClick={() => this.standalone.open()}>Standalone</Button>
    36.             </Col>
    37.             <Col>
    38.               <PhotoBrowser
    39.                 photos={this.state.photos}
    40.                 type="popup"
    41.                 ref={(el) => {this.popup = el}}
    42.               />
    43.               <Button raised onClick={() => this.popup.open()}>Popup</Button>
    44.             </Col>
    45.             <Col>
    46.               <PhotoBrowser
    47.                 photos={this.state.photos}
    48.                 type="page"
    49.                 backLinkText="Back"
    50.                 ref={(el) => {this.page = el}}
    51.               />
    52.               <Button raised onClick={() => this.page.open()}>Page</Button>
    53.             </Col>
    54.           </Row>
    55.         </Block>
    58.           <Row>
    59.             <Col>
    60.               <PhotoBrowser
    61.                 photos={this.state.photos}
    62.                 theme="dark"
    63.                 ref={(el) => {this.standaloneDark = el}}
    64.               />
    65.               <Button raised onClick={() => this.standaloneDark.open()}>Standalone</Button>
    66.             </Col>
    67.             <Col>
    68.               <PhotoBrowser
    69.                 photos={this.state.photos}
    70.                 theme="dark"
    71.                 type="popup"
    72.                 ref={(el) => {this.popupDark = el}}
    73.               />
    74.               <Button raised onClick={() => this.popupDark.open()}>Popup</Button>
    75.             </Col>
    76.             <Col>
    77.               <PhotoBrowser
    78.                 photos={this.state.photos}
    79.                 theme="dark"
    80.                 type="page"
    81.                 backLinkText="Back"
    82.                 ref={(el) => {this.pageDark = el}}
    83.               />
    84.               <Button raised onClick={() => this.pageDark.open()}>Page</Button>
    85.             </Col>
    86.           </Row>
    87.         </Block>
    88.       </Page>
    89.     );
    90. };