react-flexi-image-grid

React js Flexible Image Grid View

How to install ?

yarn add react-flexi-image-grid

Examples:

4 Columns:

2 Columns:

How to use it ?

import React, {Component} from "react";
import {FlexiImageGrid} from "react-flexi-image-grid";


class App extends Component {

    onClickHandler = (e) => {
        console.log(e.target.id);
        console.log(e.target.className);
        console.log(e.target.src);

    };

    render() {
        return (
            <div className="App">

                <FlexiImageGrid
                    images={[

                        {
                            src: "https://images.wallpaperscraft.com/image/girl_back_dress_120695_1920x1080.jpg",
                            className: "img1",
                            id: "idImg1",
                            height: "200px",
                            alt: "here 1",
                        },

                        {
                            src: "https://images.wallpaperscraft.com/image/auto_sports_car_red_120693_1920x1080.jpg",
                            className: "img2",
                            height: "",

                        },

                        {
                            src: "https://images.wallpaperscraft.com/image/auto_side_view_sports_car_red_118923_1920x1080.jpg",
                            className: "img4"
                        },

                        {
                            src: "https://images.wallpaperscraft.com/image/auto_side_view_sports_car_117332_1920x1080.jpg",
                            className: "img5"
                        }
                        ,
                        {
                            src: "https://i.pinimg.com/originals/6f/55/26/6f5526229f0b3f18e1cf64bd4eb5a62f.jpg",
                            className: "img6"
                        }

                    ]}

                    numberOfColumns={4}
                    onClick={this.onClickHandler}

                />

            </div>
        );
    }
}

export default App;

Expected Props:

1- images , it's an array of objects , each object can have the following structure:

{

    src: "https://www.w3schools.com/w3images/wedding.jpg",
    className: "img1",
    id: "idImg1",
    height: "200px",
    alt: "here 1",

   }

2- numberOfColumns it can be 1, 2 ,or 4