@rumess/react-light-gallery

DEMO

Install

npm install --save @rumess/react-light-gallery

Usage

Basic Usage

import React, { Component } from 'react'

import Gallery from '@rumess/react-light-gallery'

class Example extends Component {
  render () {
    const items = [
      {
        name: 'Name here', // Optional
        image: '/path/to/image',
        thumbnail: '/path/to/image', // Optional
        caption: 'Caption here' // Optional
      },
      {
        name: 'Name here', // Optional
        image: '/path/to/image',
        thumbnail: '/path/to/image', // Optional
        caption: 'Caption here' // Optional
      },
      ...
    ];

    return (
      <Gallery items={ items } overlay={ true } overlayColor="rgba( 255,0,0,.5 )" />
    )
  }
}

With overlay Contents

import React, { Component } from 'react'

import Gallery from '@rumess/react-light-gallery'

class Example extends Component {
  overlayContent = ( item, index ) => {
    return <h1 style={{textAlign: "center"}}>{item.caption}</h1>
  }
  render () {
    const items = [
      {
        name: 'Name here', // Optional
        image: '/path/to/image',
        thumbnail: '/path/to/image', // Optional
        caption: 'Caption here' // Optional
      },
      {
        name: 'Name here', // Optional
        image: '/path/to/image',
        thumbnail: '/path/to/image', // Optional
        caption: 'Caption here' // Optional
      },
      ...
    ];

    return (
      <Gallery items={ items } overlay={ this.overlayContent } overlayColor="rgba( 255,0,0,.5 )" />
    )
  }
}

License

MIT © rumess