griding is a set of react components, hooks and helpers to make responsive / grid layouts easier

why

although there are — already — an infinite amount of grid packages (pure css, stylus/sass, react) i couldn't find one that fill my needs:

1. responsive gutters
2. customisable breakpoints
3. real react-like API
4. easy to compose styles (lib-agnostic)
5. local overrides (via nested <Providers/>)
6. readable and predictable

installation

yarn:

yarn add griding

npm:

npm install griding --save

usage

this package provides components, hooks and a styled-components helper

components

basic usage (using default options):

import { Row, Cell, Provider } from 'griding'

const App = () => (
  <Provider>
    <Row vertical-gutter>
      <Cell xs={6} sm={4} md={3} lg={2}>
        <div>lorem</div>
      </Cell>
      <Cell xs={6} sm={4} md={3} lg={2}>
        <div>ipsum</div>
      </Cell>
    </Row>
  </Provider>
)

customizing options (breakpoints & column count):

import { Row, Cell, Provider } from 'griding'

// it will understand pixels/rems to fit your needs
const breakpoints = {
  hey:   { width: 0,       gutter: '16px'   },
  thats: { width: '480px', gutter: '1.5rem' },
  rad:   { width: '48rem', gutter: 32       },
}

const App = () => (
  <Provider breakpoints={breakpoints} columns={13}>
    <Row>
      {/* look how cool, your own named breakpoints & custom column count */}
      <Cell hey={6} thats={4} rad={3}>
        <div>lorem ipsum</div>
      </Cell>
    </Row>
  </Provider>
)

hooks

provides data derived from closest <Provider/> and / or window size*

useTheme

outputs an object with:

• columns: columns count
• breakpoints: breakpoints object as described on Provider

useWindowSize

outputs an object with numeric: innerHeight & innerWidth

when ssr, both will return 0

useMediaQuery

receives an object with optional above and below parameters and returns a boolean. both parameters can be one of:

• a string denoting a breakpoint

• a string with px or rem

• or a number of pixels

the default parameters are below: 0, above: Infinity, therefore, if no parameters are provided, it will always return true

useBreakpoints

returns an array of strings denoting the breakpoint that are visible eg. on a tablet, we should get something like ['xs', 'sm', 'md']

useCurrentBreakpoint

returns a string denoting the biggest visible breakpoint, following the example, on a tablet we should get something like 'md'

helpers

above

a media query helper utility to use inside styled-components. receives a string denoting the breakpoint, and a template literal with the css that should be rendered:

const AboveMD = styled.div`
 display: none;
 ${above('md')`
  display: block;
 `}
`

contributing

this repo is open to issues and pull requests

• editorconfig
• gitmoji

thanks

mostly of this lib was done with @leonardodino great help and probably wouldn't be possible without it.