https://github.com/mschaeffner/react-dashboard-layout
A react layout for dashboard
https://github.com/mschaeffner/react-dashboard-layout
dashboard es2015 grid-layout javascript layout react responsive
Last synced: 7 months ago
JSON representation
A react layout for dashboard
- Host: GitHub
- URL: https://github.com/mschaeffner/react-dashboard-layout
- Owner: mschaeffner
- License: mit
- Created: 2018-02-22T08:50:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:07:20.000Z (almost 3 years ago)
- Last Synced: 2025-03-14T20:39:16.024Z (8 months ago)
- Topics: dashboard, es2015, grid-layout, javascript, layout, react, responsive
- Language: JavaScript
- Homepage:
- Size: 1.91 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dashboard-layout
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[build-badge]: https://img.shields.io/travis/mschaeffner/react-dashboard-layout/master.png?style=flat-square
[build]: https://travis-ci.org/mschaeffner/react-dashboard-layout
[npm-badge]: https://img.shields.io/npm/v/react-dashboard-layout.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-dashboard-layout
## Install
``npm install --save react-dashboard-layout``
## Use
```
import ReactDashboardLayout, {Item} from 'react-dashboard-layout'
...
render() {
content
content
content
}
```
## Properties
#### ReactDashboardLayout
```javascript
// The number of columns.
cols: ?number = 12,
// The number of rows.
// Optional: if set layout will fill screen, otherwise it will be a scrollable layout.
rows: ?number,
// Controls the responsiveness of the layout, so that having a different number of columns based on the screen width.
// If this is set, then cols property will be ignored.
// Example: [ {width: 768, cols: 6}, {width: 1024, cols: 12}, {width: 480, cols: 3} ]
breakpoints: ?Array,
// The margin between children inside the layout in px, [x, y].
margin: ?[number, number] = [10, 10],
```
#### Child component inside the layout
```javascript
// The width of the child, meaning how many columns it will take of the layout.
w: number,
// The height of the child.
// If number of rows is set for the layout, then height of this child means how many rows it will take of the layout.
// Else height is relative to the width of the child.
// E.g. w=4 and h=2 would mean that the child's height is always 50% of its width.
h: number,
```