ReactJS: Code an image portfolio gallery like Pinterest and Pixabay

June 23, 2020 Goodman Loading... Post a comment

In this tutorial, we’ll create a beautiful, responsive image portfolio gallery like Pinterest and Pixabay. with an amazing library named react-masonry-component.

Here’s what you will see at the end:

Prerequisites

To follow this tutorial, you will need the following:

  • Basic knowledge of React
  • Node.js and npm installed
  • Be familiar with modern Javascript

Step 1

To get started we’ll need to create a new React project:

npx react-create-app my_app

Install react-masonry-component into our project:

npm i react-masonry-component

Step 2

Quick note: We’ll only work with 2 files: App.js and App.css

Remove all the default code from the App.js file in the src folder and add the following (the code looks so long but the big part of it is just dummy data):

import React from "react";
import Masony from "react-masonry-component";
import "./App.css";

// Dome dummy content
const PHOTOS = [
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/06/14/03/09/women-5296386_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/06/14/11/23/wanderer-5297457_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/06/18/18/53/the-cliffs-5314651_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/06/19/09/16/fantasy-5316369_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/06/18/09/42/flowers-5312741_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/06/20/10/26/plant-5320443_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2019/12/11/15/12/dogs-4688586_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/02/06/08/51/water-4823443_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2018/05/26/10/54/strawberries-3431122_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2018/03/31/06/31/dog-3277416_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2017/10/18/16/08/wolf-2864647_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2016/01/19/17/41/friends-1149841_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2019/12/11/15/12/dogs-4688586_960_720.jpg",
  },
  {
    imageUrl:
      "https://cdn.pixabay.com/photo/2020/02/06/08/51/water-4823443_960_720.jpg",
  },
];

// Masory Options
const masonryOptions = {
  fitWidth: false,
  columnWidth: 300,
  gutter: 30,
  itemSelector: ".photo-item",
};

const App = () => {
  return (
    <div>
      <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;

Step 3

Replace the default code in App.css with the following:

.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);
}

Step 4

Run your project and check the result:

npm start

I try to make the code as simple as possible so that you can easily understand how to work with react-masonry-component. From here, you’re good to go and add your own options to improve the project.

guest
0 Comments
Inline Feedbacks
View all comments

Related Articles

0
Would love your thoughts, please comment.x
()
x