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:

| name | type | required | default | description | | --------------- | ------- | -------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------- | | style | object | No | {} | CSS style for the BrickView component | | children | null | No | null | ❌❗ Do not pass children as props. Instead, nest children between the opening and closing tags | | column | number | No | 3 | Column count | | gutter | number | No | 10 | The size(px) of the gap between elements | | animateOnResize | boolean | No | true | Animate layout on screen resize | | className | string | No | react-brick-view | Custom class name of layout container | | rtl | boolean | No | false | Change layout right to left | | breakPoint | object | No | {350: 1, 450: 2, 645: 3, 900: 4, 1200: 5} | Used for responsive layout. The point at which the screen size(px) changes |

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!