griding

0.5.0 • Public • Published

griding

npm package demo Travis Coveralls Bundlephobia

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*

*: although the folowing hooks are `ssr` friendly (not breaking the build), the correct result will only return when rendering browser. by default, when `window` is not available, it will fallback to 0, and return/render mobile results.

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


thanks

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

Package Sidebar

Install

npm i griding

Weekly Downloads

30

Version

0.5.0

License

MIT

Unpacked Size

28.7 kB

Total Files

38

Last publish

Collaborators

  • vitordino