react-responsive-masonry
A lightweight responsive React pie chart component using only SVG
Getting started
You can download react-responsive-masonry
from the NPM registry via the npm
or
yarn
commands
yarn add react-responsive-masonrynpm install react-responsive-masonry --save
If you don't use package manager and you want to include react-responsive-masonry
directly in your html, you could get it from the UNPKG CDN
https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js
Demo
See Demo page
Example
Usage
If you want the number of columns change by resizing the window, you need to wrap the Masonry
component by the ResponsiveMasonry
component.
Otherwise, you only need to use the Masonry
component.
// The number of columns change by resizing the windowComponent { return <ResponsiveMasonry columnsCountBreakPoints=350: 1 750: 2 900: 3 > <Masonry> <ChildA /> <ChildB /> /* Children */ <ChildY /> <ChildZ /> </Masonry> </ResponsiveMasonry> } // The number of columns don't change by resizing the window { return <Masonry columnsCount=3> <ChildA /> <ChildB /> /* Children */ <ChildY /> <ChildZ /> </Masonry> }
Props
Mansonry component
Name | PropType | Description | Default |
---|---|---|---|
columnsCount | Number | Injected by ResponsiveMasonry | 3 |
gutter | String | Margin surrounding each item | "0" |
ResponsiveMasonry component
Name | PropType | Description | Default |
---|---|---|---|
columnsCountBreakPoints | Object | Keys are breakpoints in px, values are the columns number | {350: 1, 750: 2, 900: 3} |
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
npm test
).
See CONTRIBUTING.md guidelines
Changelog
See changelog
License
This project is licensed under the MIT License - see the LICENCE.md file for details