React js Flexible Image Grid View.
npm install react-flexi-image-grid
yarn add react-flexi-image-grid
``
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 (
{
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}
/>
export default App;
`
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