react-styled-flexboxgrid-v2
v0.0.3
Published
Grid system based on styled-components and flexbox for React. Forked from react-styled-flexbox
Downloads
44
Maintainers
Readme
react-styled-flexboxgrid
Set of React components that implement flexboxgrid.css
but with styled-components
/emotion
. Furthermore, it allows to customize grid configuration like gutter width...
Highly inspired by the excellent react-flexbox-grid
which the API is nearly the same than this module.
Usage
Installation
npm i -S react-styled-flexboxgrid-v2
react-styled-flexboxgrid
depends on 2 peer dependencies:
react@^17.0.2
prop-types@^15.0.0-0
styled-components@2
You should install them in your project.
Basic
import React from 'react'
import {Grid, Col, Row} from 'react-styled-flexboxgrid'
const App = props =>
<Grid>
<Row>
<Col xs={6} md={3}>Hello, world!</Col>
</Row>
</Grid>
Grid
The <Grid>
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): Useflex-direction: row-reverse
. Default: falsestart
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): Useflex-direction: column-reverse
. Default: falsexs
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)
- When
xsOffset
smOffset
mdOffset
lgOffset
(Integer): Offset the column.
Configuration
The grid use same defaults than flexboxgrid.css
.
You can customize values using <ThemeProvider>
component from styled-components.
react-styled-flexboxgrid
will looks at the flexboxgrid
property in the theme.
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 =>
<ThemeProvider theme={theme}>
<Grid>
<Row>
<Col xs={6} md={3}>Hello, world!</Col>
</Row>
</Grid>
</ThemeProvider>
Use with Emotion
To use react-styled-flexboxgrid with emotion, import from 'react-styled-flexboxgrid/emotion':
import { Grid, Col, Row } from 'react-styled-flexboxgrid/emotion'
Related projects
License
MIT