In this tutorial we'll create a responsice image gallery like pinterest with react-masonry-component
Install react-masonry-component
https://github.com/eiriklv/react-masonry-component
npm i react-masonry-component
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React from "react";
import Masony from "react-masonry-component";
import "./App.css";
// Dome dummy content
const PHOTOS = [
{
imageUrl:
"https://images.pexels.com/photos/1076240/pexels-photo-1076240.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/757444/pexels-photo-757444.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/2516406/pexels-photo-2516406.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/2413238/pexels-photo-2413238.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/1714455/pexels-photo-1714455.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/2407265/pexels-photo-2407265.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/3698534/pexels-photo-3698534.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/2467670/pexels-photo-2467670.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/2623690/pexels-photo-2623690.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/3047993/pexels-photo-3047993.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/239546/pexels-photo-239546.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/4496891/pexels-photo-4496891.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
{
imageUrl:
"https://images.pexels.com/photos/8979525/pexels-photo-8979525.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
},
];
// Masory Options
const masonryOptions = {
fitWidth: false,
columnWidth: 300,
gutter: 30,
itemSelector: ".photo-item",
};
const App = () => {
return (
<div> <h1>ReactJS Image gallery - React Masonry Component</h1>
<Masony
className={"photo-list"}
elementType={"ul"}
options={masonryOptions}
disableImagesLoaded={false}
updateOnEachImageLoad={false}
>
{PHOTOS.map((photo) => (
<li className={`photo-item`}>
<img src={photo.imageUrl} alt="" />
</li>
))}
</Masony>
</div>
);
};
export default App;
src/App.css
//src/App.css
.photo-list {
width: 90%;
list-style: none;
margin: 20px auto;
}
.photo-item {
display: flex;
width: 300px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
margin: 20px 0;
}
.photo-item img {
display: flex;
width: 100%;
border: 4px double rgba(0, 0, 0, .12);
}
