@lifeondesk/react-masonry-layout

Description

@lifeondesk/react-masonry-layout is a flexible and easy-to-use React library for creating responsive Masonry layouts. The library provides a set of components that allow you to create Masonry-style grid layouts with customizable brick sizes and responsive behavior.

Features

• Easily create Masonry layouts with React components.
• Customize the size of bricks for different screen sizes.
• Responsive design with support for desktop, tablet, and mobile views.
• CSS Modules support for scoped styles.

Installation

To install the library, use npm or yarn:

1npm install @lifeondesk/react-parallax-grid

or

1yarn add @lifeondesk/react-parallax-grid

Usage

To use the Masonry layout in your React project:

1. Import the library's CSS file in your application.

1import '@lifeondesk/react-parallax-grid/index.css';

2. Import the components

import the components from the library and render them in your component hierarchy.

1import React from 'react';
2import { Masonry, BrickCustom, BrickSmall, BrickMedium, BrickLarge } from '@lifeondesk/react-masonry-layout';
3
4const MyMasonryLayout = () => {
5  return (
6    <Masonry>
7      <BrickCustom desktopBasis={33} tabletBasis={50} mobileBasis={100}>
8        {/* Your content here */}
9      </BrickCustom>
10      <BrickSmall>
11        {/* Your content here */}
12      </BrickSmall>
13      <BrickMedium>
14        {/* Your content here */}
15      </BrickMedium>
16      <BrickLarge>
17        {/* Your content here */}
18      </BrickLarge>
19      {/* Add more bricks as needed */}
20    </Masonry>
21  );
22};
23
24export default MyMasonryLayout;

Props

Masonry

The Masonry components accept various props for customization. Here are the common props:

• className: Additional CSS class names to apply to the brick.
• style: Additional inline styles to apply to the brick.
• children: The content to render inside the brick.

Brick

The Brick components accept various props for customization. Here are the common props:

• className: Additional CSS class names to apply to the brick.
• style: Additional inline styles to apply to the brick.
• children: The content to render inside the brick.

The specific props for each brick size (Custom, Small, Medium, Large) are as follows:

• desktopBasis: The flex basis of the brick on desktop screens (in percentage).
• tabletBasis: The flex basis of the brick on tablet screens (in percentage).
• mobileBasis: The flex basis of the brick on mobile screens (in percentage).
• fixed: Will keep the brick to its basis size without automatically stretching to fill the space (false by default)

License

This project is licensed under the ISC License.

Contributions

Contributions to this project are welcome! If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.

Changelog

Credits

This library is developed and maintained by lifeondesk.

---

Thank you for using @lifeondesk/react-masonry-layout! If you have any questions or need further assistance, please feel free to reach out. Happy coding!