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:
- responsive gutters
- customisable breakpoints
- real react-like API
- easy to compose styles (lib-agnostic)
- local overrides (via nested
<Providers/>
) - 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 > <Cell = = = => <div>lorem</div> </Cell> <Cell = = = => <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 needsconst breakpoints = hey: width: 0 gutter: '16px' thats: width: '480px' gutter: '1.5rem' rad: width: '48rem' gutter: 32 const App = <Provider = => <Row> /* look how cool, your own named breakpoints & custom column count */ <Cell = = => <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 countbreakpoints
: 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
orrem
-
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 = styleddiv` display: none; `
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.