@aaronuu/react-layout NPM

react-layout

CSS grid and flexbox helper components for react. Uses emotion for css injection.

Features

Declarative layout - having layout properties on the component makes page layout easier to reason about while not sacrificing performance by inlining all styles
- Class construction is memoized based on props
Aliased css properties - less typing required
- All properties (except position which is shortened to pos) are shortened to the first letter of each word of the property
- Some of the more common properties also have easier to remember aliases (e.g. rows for gridTemplateRows)
- You can either use the full prop name or any of it's aliases.
Flexible breakpoints
- Given an integer as the key (or a string that can be parsed to an integer) the breakpoint will default as @media (max-width: <key>px)
- Anything else will simply use the key as the media query
Inspired by react-native styling, flex-direction defaults to column

Getting Started

Installing

Install using yarn

yarn add @aaronuu/react-layout emotion

Install using npm

npm i @aaronuu/react-layout emotion

Usage

import { Box, Grid, GridItem } from '@aaronuu/react-layout';

const BREAKPOINT_MOBILE = '768';
const BREAKPOINT_TABLET = '@media(min-width: 768px and max-width: 1024px)';

class YourComponent extends Component {
  render() {
    return (
      <Grid
        rowGap="20px"
        columnGap="10px"
        rows="auto 1fr auto"
        columns="repeat(10, 100px)"
        breakpoints={{
          [BREAKPOINT_TABLET]: {
            rows: 'auto minmax(150px, 500px) auto'
          },
          [BREAKPOINT_MOBILE]: {
            rows: '1fr'
          }
        }}
      >
        <GridItem
          subgrid
          rows="100px 100px 100px"
          columns="auto"
          tag="span"
          area="1 / 1 / 4 / 3"
          breakpoints={{
            [BREAKPOINT_MOBILE]: {
              area: '1 / 1 / 2 / 3'
            }
          }}
        >
          <Box padding="10px">
            <h1>Heading</h1>
          </Box>
        </GridItem>
        <GridItem
          flex
          flexDirection="row"
          area="1 / 3 / 4 / 11"
          breakpoints={{
            [BREAKPOINT_MOBILE]: {
              area: '1 / 3 / 2 / 11'
            }
          }}
        >
          <Box ai="center" jc="center">
            <p>Content</p>
          </Box>
        </GridItem>
      </Grid>
    );
  }
}

Props

Shared

Prop	Alias
tag	-
position	pos
top	t
right	r
bottom	b
left	l
height	h
width	w
maxHeight	maxh
maxWidth	maxw
minHeight	minh
minWidth	minw
padding	p
paddingTop	pt
paddingRight	pr
paddingBottom	pb
paddingLeft	pl
margin	m
marginTop	mt
marginRight	mr
marginBottom	mb
marginLeft	ml
overflow	o

Box

Prop	Alias
flexDirection	fd, direction
flexWrap	fw, wrap
alignItems	ai
alignContent	ac
justifyContent	jc
flexGrow	fg
flexShrink	fs
flex	f
flexAuto	fa
flexNone	fn

Grid

Prop	Alias
gridGap	gg, gap
gridRowGap	grg, rowGap
gridColumnGap	gcg, columnGap
gridTemplateRows	gtr, rows
gridTemplateColumns	gtc, columns
justifyItems	ji
alignItems	ai
placeItems	pc
justifyContent	jc
alignContent	ac
placeContent	pc
gridAutoColumns	gac
gridAutoRows	gar
gridAutoFlow	gaf

GridItem

Prop	Alias
subgrid
flex
gridRowStart	grs, rowStart
gridRowEnd	gre, rowEnd
gridColumnStart	gcs, columnStart
gridColumnEnd	gce, columnEnd
gridRow	gr, row
gridColumn	gc, column
gridArea	ga, area
justifySelf	js
alignSelf	as
placeSelf	ps

The subgrid prop will make the GridItem also a Grid and the flex prop will make it also a Box

Caveats

React 16 only for now.

Only flexbox container properties have been exposed, all flexbox child properties will still have to be added to the child elements directly.

Due to how CSS Grid works all children of the Grid component are technically 'grid items' so you aren't limited to using the GridItem component to style Grid children.

Refs will be forwarded to the inner element using the forwardRef API so the ref will return a reference to the underlying DOM node rather than the instance of the component.