Skip to main content

README

️🤏 use-grid

 npm version  downloads  license MIT  docs available  module formats

 codecov  bundle size  Tweet

🤏 use-grid is

  • a hook to build responsive layouts of all shapes and sizes,
  • a fork of 👌 use-media that track the state of CSS media queries,
  • a fork of 👏 use-intersection that track whether the target intersects,
  • and remake of 🅱 bootstrap grid system thanks to responsive column system.


Table of Contents

Install via npm

npm i use-grid

Quick started

git clone github.com/tseijp/use-grid
cd use-grid
npm run init
npm run docs

Simple example

switch by media query

const isMedium = useMedia({ minWidth:720, maxWidth:960 });
const [ fontSize ] = useGrid({ xs:"2em", md:"50px", xl:"75px" });
const [ width,set ] = useGrid({ xs: 8/9 , md: 500 , lg: 750 });
const handler = () => set((p)=>({md: p.lg, lg: p.md}))

render (
<div
style={{fontSize, width}}
onClick={handler}>
{isMedium?'😃':'😢'}
</div>
);

use grid system

const face = ['🙄','🤣','🧐','🤯','🤮'];
const ref = React.useRef(null)
const [ws] = useGrids(face.length, (i)=>(i%2===0)
? { md: 1/5, xl: i/face.length/3 }
: { md: 1/10, xl: i/face.length/6 }
, [ref]);

render (
<div ref={ref} style={{display:"grid", width:"95%"}}>
{face.map( (emoji, i) =>
<div style={{width:ws[i]}}>{emoji}</div>
)}
</div>
);

use view system

import React from 'react';
import {useGrid, useView} from 'use-grid';

const ref1 = React.useRef(null)
const ref2 = React.useRef(null)

const isView = useView(ref1)
const [fontSize, set] = useGrid({md:100,lg:200}, [ref1])
const [background] = useGrid({
none:"#000", init:"#fff",
onView: bool =>
set(bool? {md:150, lg:250}
: {md:100, lg:200})
}, [ref1, ref2])

render (
<div style={{fontSize,background}}>
<div ref={ref1}>{'😎'}</div>
{[...Array(10).keys()].map(i =>
<div key={i}>{isView?'😘':'🤣'}</div>
)}
<div ref={ref2}>{'😎'}</div>
</div>
)

Available hooks

HookDescription
useGridmake it switch value by media query using useEffect
useGridsmultiple values can be switched by media queries
useMediaget a match to media query using useEffect
useViewget a flag whether the target intersects
useLayoutGridwork like useGrid using useLayoutEffect
useLayoutGridswork like useGrids using useLayoutEffect
useLayoutMediawork like useMedia using useLayoutEffect
useLayoutViewwork like useView using useLayoutEffect

Performance Pitfalls

Grid prefix

The grid system uses containers, rows and columns to control layout and alignment.

Learn More

nameprefixmax widthmax container width
Extra smallxs<576 pxauto
Smallsm>=576 px540 px
Mediummd>=768 px720 px
Largelg>=992 px960 px
Extra largexl>=1200 px1140 px

Grid Options

nameworks
initinitial value to be specified
nonevalue when the element is not visible
onViewfunction called when the target intersects
configconfig for useGrid
viewConfigconfig for useMedia
mediaConfigconfig for useView

same works

const width1 = useGrid({sm:1, md:1/2, lg:"750px"})
const width2 = useGrid({sm:"100%",md:"50%",lg:"750px"})
const width3 = useGrid([["sm","100%"], ["md":"50%"], ["lg":"750px"]])
const width4 = useGrid([[{ maxWidth:"576px"}, "100%"],
[{minWidth:"576px",maxWidth:"768px"}, "50%"],
[{minWidth:"768px" },"750px"]])
const width5 = useGrid([[ "max-width:576px", "100%"],
["min-width:576px and max-width:768px", "50%"],
["min-width:768px" ,"750px"]])
const width =
|| width1
|| width2
|| width3
|| width4
|| width5

render (
<div style={{width}} />
)