react-brick-view

react-brick-view is a 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.

See Live Demo

Installation :

npm install react-brick-view

or

yarn add react-brick-view

Usage :

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

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

import React from 'react'
import { BrickView } from 'react-brick-view'

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

export default Masonry

Props :

The BrickView component accepts the following 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!