How to Create a React Masonry Portfolio?

In this article, I will be going to show you how to create a simple React Masonry Component for making a website beautiful! It’s quite simple to use for making a portfolio responsive-without jQuery. 

Step 1

Install the package

npm install --save react-masonry-component

Step 2

Create a component

import React, { Component } from 'react';
import Masonry from 'react-masonry-component';
import Link from 'next/link';

const masonryOptions = {
    transitionDuration: 0
};
 
export class Projects extends Component {
    render() {
        const images = this.props.images.map((image, idx) => {
            return (
                <div className="col-lg-4 col-sm-6 item" key={idx}>
                    <div className="single-latest-projects">
                        <img src={image.image} alt="portfolio-image" />

                        <div className="content">
                            <span>{image.category}</span>
                            <h3>{image.title}</h3>
                        </div>

                        <Link href="#">
                            <a className="link-btn"></a>
                        </Link>
                    </div>
                </div>
            )
        })
        return (
            <div className="our-latest-projects ptb-80">
                <div className="container">
                    <Masonry
                        className={'row'} // default ''
                        elementType={'div'} // default 'div'
                        options={masonryOptions} // default {}
                        disableImagesLoaded={false} // default false
                        updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
                    >
                        {images}
                    </Masonry>
                </div>
            </div>
        );
    }
}

Projects.defaultProps = {
    images: [
        { 
            image: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=60",
            category: "Business",
            title: "Business Stratagy"
        },
        { 
            image: "https://images.unsplash.com/photo-1614892008789-1d0e9fea741a?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", 
            category: "Development",
            title: "Web Development"
        },
        { 
            image: "https://images.unsplash.com/photo-1614949238605-fcc37adef498?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=60", 
            category: "Marketing",
            title: "Digital Marketing"
        },
        { 
            image: "https://images.unsplash.com/photo-1601933470096-0e34634ffcde?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=60",
            category: "App",
            title: "Mobile App Development"
        },
        { 
            image: "https://images.unsplash.com/photo-1614862577311-d497a1c397af?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5MXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=60",
            category: "Marketing",
            title: "Email Marketing"
        },
        { 
            image: "https://images.unsplash.com/photo-1614794447777-63bd5f669437?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDR8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=60",
            category: "Development",
            title: "E-commerce Development"
        },
        { 
            image: "https://images.unsplash.com/photo-1614746713986-0afbec40881f?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDV8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
            category: "App",
            title: "React App Development"
        },
        { 
            image: "https://images.unsplash.com/photo-1485217988980-11786ced9454?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMDl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
            category: "Writing",
            title: "Content Writing"
        },
        { 
            image: "https://images.unsplash.com/photo-1614616488801-92fc3870fb50?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMTB8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60",
            category: "IT",
            title: "IT Consultancy"
        },
        { 
            image: "https://images.unsplash.com/photo-1612831197872-e4e4ca7f623f?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMTR8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
            category: "Solutions",
            title: "IT Solutions"
        },
        { 
            image: "https://images.unsplash.com/photo-1612831661941-254341b885e9?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMzN8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60",
            category: "Marketing",
            title: "Marketing & Reporting"
        },
    ]
}

export default Projects;

Step 3

Add the CSS

.our-latest-projects {
    padding-top: 80px;
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}
.single-latest-projects {
    margin-bottom: 30px;
    position: relative;

    img {
        width: 100%;
    }

    .link-btn {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 2;
    }
    .content {
        position: absolute;
        left: 25px;
        top: 60%;
        transform: translateY(-60%);
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
        background-color: #fff;
        box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
        padding: 25px;
        margin-top: 20px;

        span {
            display: block;
            text-transform: uppercase;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 13px;
        }
        h3 {
            margin-bottom: 0;
            font: {
                weight: 600;
                size: 20px;
            };
        }
    }
    &:hover {
        .content {
            opacity: 1;
            visibility: visible;
            margin-top: 0;
        }
    }
}

Step 4

After that import _app.js file

import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'

That’s all! For more details you can check below link-

https://www.npmjs.com/package/react-masonry-component

Bonus: Are you looking for the latest React-based website templates?

Gunter React – Click to view

Fleja – Click to view

Rosy – Click to view

ADDAX – Click to view

Axolot – Click to view