https://github.com/ibraabukaff/react-flexi-image-grid
React js Flexible Image Grid View
https://github.com/ibraabukaff/react-flexi-image-grid
flexible grid grid-view image photo-grid react reactjs
Last synced: 3 months ago
JSON representation
React js Flexible Image Grid View
- Host: GitHub
- URL: https://github.com/ibraabukaff/react-flexi-image-grid
- Owner: ibraAbuKaff
- License: mit
- Created: 2018-04-30T14:38:41.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-06T08:42:47.000Z (about 8 years ago)
- Last Synced: 2025-08-09T14:28:06.384Z (12 months ago)
- Topics: flexible, grid, grid-view, image, photo-grid, react, reactjs
- Language: JavaScript
- Size: 6.49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 (
);
}
}
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