@dinethpiyumantha/react-image-grid-gallary

react-image-grid-gallary

This React Component displays an image gallery using CSS Grid.

Install

npm install --save react-image-grid-gallary

Usage

Import resources

import Image1 from './assets/1.jpg'
import Image2 from './assets/2.jpg'

Using component wise

Using this way, you can add images seperatly. If you are wish to use a loop, the you can use this.

import React, { Component } from 'react'

import GalleryGrid, { GalleryImage } from 'react-image-grid-gallary'
import 'react-image-grid-gallary/dist/index.css'

class App extends Component {
  render() {
    return (
      <GalleryGrid cols={5} >
        <GalleryImage src={ Image1 } title="1 Lorem ipsum dolor sit amet" />
        <GalleryImage src={ Image2 } title="2 Lorem ipsum dolor sit amet" />
      </GalleryGrid>
    )
  }
}

Using as a list

If you wish to add object list. You can use this way

```jsx import React, { Component } from 'react'

import { GalleryImageList } from 'react-image-grid-gallary' import 'react-image-grid-gallary/dist/index.css'

class App extends Component { render() { return ( <GalleryImageList cols={3} imageList={[ {src: Image2, title: "1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, dolorem!" }, {src: Image1, title: "2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, dolorem!" } ]} /> ) } }

## License

MIT © [dinethpiyumantha](https://github.com/dinethpiyumantha)