https://github.com/sibiraj-s/react-layout-masonry

Responsive masonry layout for React
https://github.com/sibiraj-s/react-layout-masonry

react react-layout react-masonry

Last synced: 3 days ago
JSON representation

Responsive masonry layout for React

• Host: GitHub
• URL: https://github.com/sibiraj-s/react-layout-masonry
• Owner: sibiraj-s
• License: mit
• Created: 2023-08-16T11:15:15.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-10-17T10:03:22.000Z (4 months ago)
• Last Synced: 2024-10-19T13:33:16.625Z (4 months ago)
• Topics: react, react-layout, react-masonry
• Language: TypeScript
• Homepage: https://sibiraj-s.github.io/react-layout-masonry/
• Size: 1.65 MB
• Stars: 32
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Layout Masonry

> React Layout Masonry is a flexible and customizable React component for creating dynamic and fixed/responsive masonry

> layouts.

[![Tests](https://github.com/sibiraj-s/react-layout-masonry/actions/workflows/tests.yml/badge.svg)](https://github.com/sibiraj-s/react-layout-masonry/actions/workflows/tests.yml)

[![NPM](https://badgen.net/npm/v/react-layout-masonry)](https://www.npmjs.com/package/react-layout-masonry)

## Installation

You can install React Layout Masonry using npm, pnpm or yarn:

```bash

npm install react-layout-masonry

```

or

```bash

pnpm install react-layout-masonry

```

or

```bash

yarn add react-layout-masonry

```

## Usage

### Fixed Columns Layout

Here's an example of how to use React Layout Masonry with a fixed number of columns in your React application:

```jsx

import Masonry from 'react-layout-masonry';

const FixedColumnsMasonry = () => {

  return (

    

      {items.map((item) => {

        return ;

      })}

    

  );

};

export default FixedColumnsMasonry;

```

### Responsive Columns Layout

Here's an example of how to use React Layout Masonry with responsive columns in your React application:

```jsx

import Masonry from 'react-layout-masonry';

const ResponsiveColumnsMasonry = () => {

  return (

    

      {items.map((item) => {

        return ;

      })}

    

  );

};

export default ResponsiveColumnsMasonry;

```

or use the array syntax

```js

```

this will be converted to

```json

{

  "640": 1,

  "1280": 3

}

```

The array's order corresponds to the default breakpoints, which are `640, 786, 1024, 1280, 1536`.

### Column Props

The `columnProps` prop allows you to apply additional props to the container of each column. Here's an example:

```jsx

  {/* ... */}

```

## Props

- `columns` (number or object, required): The number of columns in the masonry layout, or an object with breakpoints and corresponding column counts.

- `gap` (number, optional): The spacing between columns and rows in pixels. Defaults to 0.

- `columnProps` (object, optional): Additional props to be applied to each column, such as className for styling.

## Examples

For examples, usage and customization options, please refer to the [docs](docs/src/components/) directory in this repository.

## Contributing

If you encounter any issues or have questions, please [open an issue](https://github.com/sibiraj-s/react-layout-masonry/issues)

on our GitHub repository. Make sure to create an issue or discussion first before raising a PR

## License

React Layout Masonry is open-source software licensed under the [MIT License](LICENSE).