Package Exports

react-brick-view
react-brick-view/dist/cjs/index.js
react-brick-view/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-brick-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-brick-view

npm-typescript

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

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!