react-brick-layout

react-brick-layout is lightweight, performant, and responsive masonry layout component that arranges elements in a grid-like structure, with elements of varying heights. The elements are placed in such a way that there are minimal gaps between them, creating a cohesive and visually appealing layout.

Live Demo

Installation:

npm install react-brick-layout --save-dev

or

yarn add -D react-brick-layout

Usage :

To use the react-brick-layout library, you would first need to install it in your project by running npm install react-brick-layout or yarn add react-brick-layout. Once the library is installed, you can import the Masonry component and use it in your application.

Here's an example of how you can use the BrickLayout component to create a simple Masonry layout in a React application:

import React from 'react'
import { BrickLayout } from 'react-brick-layout'

const Masonry = () => {
  return (
    <BrickLayout gutter={10} column={5}>
      <div>Element 1</div>
      <div>Element 2</div>
      <div>Element 3</div>
      <div>Element 4</div>
      <div>Element 5</div>
    </BrickLayout>
  )
}

export default Masonry

Props

Conclusion

This package provides a simple, lightweight solution for creating responsive brick-style layouts in React. It allows for customization of the layout to suit your specific needs and requirements. If you find it useful, please consider giving it a positive rating or review. Thank you!