https://github.com/fakundo/react-grid-is-good
React grid system
https://github.com/fakundo/react-grid-is-good
Last synced: 6 months ago
JSON representation
React grid system
- Host: GitHub
- URL: https://github.com/fakundo/react-grid-is-good
- Owner: fakundo
- Created: 2016-12-07T02:20:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-06T16:04:32.000Z (almost 9 years ago)
- Last Synced: 2024-04-15T01:10:36.877Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 66.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Grid System
[](https://www.npmjs.com/package/react-grid-is-good)
### Installation
```
npm install react-grid-is-good
```
### Features
- inline styles
- flex
- responsive
- custom breakpoints with your own names
- automatically breaks overflowing rows
- based on Bootstrap styles
### Examples
```js
import React, { Component } from 'react';
import { Grid, Span, Visible, Hidden } from 'react-grid-is-good';
class GridComponent extends Component {
render() {
return (
#1
#2
#1
#2
#1
#2
#3
#4
#5
#1
#2
#1
#2
#1
#2
I am visible when breakpoint is "tablet" or "mobile"
I am hidden when breakpoint is "md" or "lg"
);
}
}
```
### Component properties
#### Grid
- **`breakpoint`** `{string} [breakpoint]`
- **`size`** `{number} [size=12]`
- **`gutter`** `{number} [gutter=0]`
- **`align`** `{string} [align='left']`
- **`valign`** `{string} [valign='top']`
- ...props based on your breakpoint, for example if you pass `breakpoint="desktop"` and `sizeDesktop="12"` then size will be `12`
#### Span
- **`size`** `{string} [size=1]`
- **`pull`** `{string} [pull=0]`
- **`push`** `{string} [push=0]`
- **`offset`** `{string} [offset=0]`
- **`break`** `{boolean} [break=false]`
- **`align`** `{string} [align='left']`
- **`valign`** `{string} [valign='top']`
- ...props based on your breakpoint
#### Visible
- **`breakpoint`** `{string} [breakpoint]`
- ...your breakpoints to set visibility`
#### Hidden
- **`breakpoint`** `{string} [breakpoint]`
- ...your breakpoints to set visibility`
### How to use
You should wrap all components and pass to them your own "breakpoint" property.
This property can be calculated the way you like.