Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/loicmahieu/react-styled-flexboxgrid
Grid system based on styled-components and flexbox for React
https://github.com/loicmahieu/react-styled-flexboxgrid
flexbox grid react styled-components
Last synced: 1 day ago
JSON representation
Grid system based on styled-components and flexbox for React
- Host: GitHub
- URL: https://github.com/loicmahieu/react-styled-flexboxgrid
- Owner: LoicMahieu
- License: mit
- Created: 2017-01-24T11:26:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-02T14:11:05.000Z (9 months ago)
- Last Synced: 2024-10-29T17:38:36.258Z (about 2 months ago)
- Topics: flexbox, grid, react, styled-components
- Language: JavaScript
- Homepage: https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html
- Size: 3.59 MB
- Stars: 558
- Watchers: 16
- Forks: 68
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-styled-flexboxgrid
[](https://badge.fury.io/js/react-styled-flexboxgrid)
[](https://travis-ci.org/LoicMahieu/react-styled-flexboxgrid)
[](https://www.npmjs.org/package/react-styled-flexboxgrid)
[](http://standardjs.com)
Set of React components that implement [`flexboxgrid.css`](https://github.com/kristoferjoseph/flexboxgrid) but with [`styled-components`](https://github.com/styled-components/styled-components)/[`emotion`](https://github.com/emotion-js/emotion). Furthermore, it allows to customize grid configuration like gutter width...
Highly inspired by the excellent [`react-flexbox-grid`](https://github.com/roylee0704/react-flexbox-grid) which the API is nearly the same than this module.
[**Demo**](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html)
## Usage
### Installation
```
npm i -S react-styled-flexboxgrid
```
`react-styled-flexboxgrid` depends on 2 **peer** dependencies:
- `react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0`
- `prop-types@^15.0.0-0`
- `styled-components@2`
You should install them in your project.
### Basic
```JSX
import React from 'react'
import {Grid, Col, Row} from 'react-styled-flexboxgrid'
const App = props =>
Hello, world!
```
### Grid
The `` component is optional and can help to wrap children in a fixed/fluid container. Use the configuration `container` for fixed width value.
##### Props
- `fluid` _(Boolean)_: Create a responsive fixed width container or a full width container, spanning the entire width of your viewport. Default: false
### Row
##### Props
- `reverse` _(Boolean)_: Use `flex-direction: row-reverse`. Default: false
- `start`
- `center`
- `end`
- `top`
- `middle`
- `bottom`
- `around`
- `between`
- `first`
- `last` _(String(xs|sm|md|lg)_: Align elements to the start or end of row as well as the top, bottom, or center of a column.
### Col
##### Props
- `reverse` _(Boolean)_: Use `flex-direction: column-reverse`. Default: false
- `xs`
- `sm`
- `md`
- `lg` _(Boolean|Integer)_:
* When `true`, enable auto sizing column.
* When `false`, hide colomn for the breakpoint.
* When `integer` value, it specify the column size on the grid. (1 to 12)
- `xsOffset`
- `smOffset`
- `mdOffset`
- `lgOffset` _(Integer)_: Offset the column.
### Configuration
The grid use same defaults than [`flexboxgrid.css`](https://github.com/kristoferjoseph/flexboxgrid).
You can customize values using [``](https://github.com/styled-components/styled-components#theming) component from styled-components.
`react-styled-flexboxgrid` will looks at the `flexboxgrid` property in the theme.
```JSX
import React from 'react'
import {ThemeProvider} from 'styled-components'
import {Grid, Col, Row} from 'react-styled-flexboxgrid'
const theme = {
flexboxgrid: {
// Defaults
gridSize: 12, // columns
gutterWidth: 1, // rem
outerMargin: 2, // rem
mediaQuery: 'only screen',
container: {
sm: 46, // rem
md: 61, // rem
lg: 76 // rem
},
breakpoints: {
xs: 0, // em
sm: 48, // em
md: 64, // em
lg: 75 // em
}
}
}
const App = props =>
Hello, world!
```
## Use with Emotion
To use react-styled-flexboxgrid with emotion, import from 'react-styled-flexboxgrid/emotion':
```jsx
import { Grid, Col, Row } from 'react-styled-flexboxgrid/emotion'
```
## Related projects
- [styled-components](https://github.com/styled-components/styled-components)
- [hedron](https://github.com/JSBros/hedron)
## License
MIT