React Grid System
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
;; { return <div> <Grid> <Span size="25%">#1</Span> <Span size="75%">#2</Span> </Grid> <Grid align="center"> <Span size="1/2">#1</Span> <Span size="1/2">#2</Span> </Grid> <Grid size="12"> <Span size="6">#1</Span> <Span size="6">#2</Span> <Span size="3">#3</Span> <Span size="3">#4</Span> <Span size="6">#5</Span> </Grid> <Grid size="12"> <Span size="3">#1</Span> <Span size="3" push="3">#2</Span> </Grid> <Grid size="12"> <Span size="3" push="6">#1</Span> <Span size="3">#2</Span> </Grid> <Grid breakpoint="small" size="12"> <Span sizeSmall="6">#1</Span> <Span sizeSmall="6">#2</Span> </Grid> <Visible breakpoint="tablet" mobile tablet> I am visible when breakpoint is "tablet" or "mobile" </Visible> <Hidden breakpoint="sm" md lg> I am hidden when breakpoint is "md" or "lg" </Hidden> </div> ; }
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"
andsizeDesktop="12"
then size will be12
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.