@dinethpiyumantha/react-image-grid-gallary

    1.0.0 • Public • Published

    react-image-grid-gallary

    This React Component displays an image gallery using CSS Grid.

    NPM JavaScript Style Guide

    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)
    

    Install

    npm i @dinethpiyumantha/react-image-grid-gallary

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    31.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • dinethpiyumantha