Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/broucz/react-inline-grid
Predictable flexbox based grid for React.
https://github.com/broucz/react-inline-grid
Last synced: about 2 months ago
JSON representation
Predictable flexbox based grid for React.
- Host: GitHub
- URL: https://github.com/broucz/react-inline-grid
- Owner: broucz
- License: mit
- Created: 2015-08-20T10:29:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-15T19:54:40.000Z (over 4 years ago)
- Last Synced: 2024-09-21T19:44:50.169Z (3 months ago)
- Language: JavaScript
- Homepage: http://broucz.github.io/react-inline-grid/
- Size: 317 KB
- Stars: 169
- Watchers: 7
- Forks: 6
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-inline-grid - Predictable flexbox based grid for React. (Uncategorized / Uncategorized)
- awesome-list - react-inline-grid - Predictable flexbox based grid for React. (Soluções / Form Components)
README
# [React Inline Grid](http://broucz.github.io/react-inline-grid)
**A predictable gird layout based on flexbox for [React](https://facebook.github.io/react/) applications using inline styles.**
[](https://www.npmjs.com/package/react-inline-grid)
## Install
`npm install react-inline-grid --save`
## API
### Sample Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, Row, Cell } from 'react-inline-grid';
const Layout = React.createClass({
render() {
return (
content_a
content_b
);
}
});
ReactDOM.render(, document.body);
```
The library exports `Grid`, `Row` and `Cell`.
### <Grid />
Grid wrap inner components with [React Redux](https://github.com/rackt/react-redux#provider-store) ``.
Using [Redux](https://github.com/rackt/redux), Grid's inner components can react to store update. Here Redux is used to handle [MediaQueryList](https://developer.mozilla.org/en/docs/Web/API/MediaQueryList) changes and update components `style` property:
```js
// phone
// tablet
// desktop
```
Grid exposes the property `options` allowing you to define custom grid settings.
`options` shape:
```js
{
columns: number // default = 12 - Columns size for the bigger media.
gutter: number // default = 16 - Gutter size in pixel.
margin: number // default = 16 - Margin size in pixel.
deaf: bool // default = false - Ignore MediaQueryList updates.
list: [ // default = [...] - List of target media.
{
name: string // required - Media name.
query: string // required - Media query to test.
gutter: number // default = options -> gutter - Media gutter size in pixel.
margin: number // default = options -> margin - Media margin size in pixel.
}
]
}
```
If `options` is not provided, or invalid, it will be fixed to apply values inspired by [Google Material Design Lite](http://www.getmdl.io/) grid layout:
```js
// options -> list
[
{
name: 'phone',
gutter: 16,
margin: 16,
columns: 4,
query: '(max-width: 479px)'
},
{
name: 'tablet',
gutter: 16,
margin: 16,
columns: 8,
query: '(min-width: 480px) and (max-width: 839px)'
},
{
name: 'desktop',
gutter: 16,
margin: 16,
columns: 12,
query: '(min-width: 840px)'
}
]
```
If no media match the queries, Grid will define the first `options -> list -> value` as default current media in order to match the "popular" mobile first approch.
### <Row />
Exposes the property `is` (string) to update the following default style object:
```js
{
display: 'flex',
flexFlow: 'row wrap',
alignItems: 'stretch'
}
```
`is` specify the `justify-content` style property as:
- `start`
- `center`
- `end`
- `around`
- `between`
```js
Content
// not phone
Content
// phone
Content
```
### <Cell />
Exposes the property `is` (string) to update the following default style object:
```js
{
boxSizing: 'border-box'
}
```
`is` specify cell size and `align-self` style property as:
- ``
- `-`
- `-offset-`
- `top`
- `middle`
- `bottom`
- `stretch`
```js
Content
// desktop
Content
// tablet
Content
// phone
Content
```
For both `` and ``, `is` property ask for an "already defined" values, the last one is used:
```js
Content
// will be defined as
Content
```
## Examples
The [gh-pages](http://broucz.github.io/react-inline-grid/) page of this repository use some patterns as examples, but feel free to play and test your layouts using the `examples` folder.
Run the gh-pages example:
```
git clone https://github.com/broucz/react-inline-grid.git
cd react-inline-grid
npm install
cd examples/react-transform-boilerplate
npm install
npm start
open http://localhost:3000/
```
## Thanks
* [Redux](https://github.com/rackt/redux) I learned a lot from package evolution, author [@gaearon](https://github.com/gaearon), contributors, and related discussions.
* [React](https://facebook.github.io/react) for the fun.
* [React Redux](https://github.com/rackt/react-redux) to make it easier.