use-grid

️🤏 use-grid

🤏 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
• Quick started
• Simple example
• Available hooks
• Performance pitfalls

Install via npm

npm i use-grid

Quick started

git clone github.com/tseijp/use-grid
cd use-grid
npm i -D
npm start

• open browser and visit localhost:3000
• ~Now you can go to our demo, and try its usage.~

Simple example

switch by media query

import React from 'react'
import { useMedia, useGrid } from 'use-grid'
export const App = () => {
    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    });
    return (
        <div style={{fontSize, width}}
            onClick={() => set((p)=>({md:p.lg,lg:p.md}))}>
            {isMedium?'😃':'😢'}
        </div>
    );
};

use grid system

import React from 'react'
import { useGrids } from 'use-grid'
export const App = () => {
    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]);
    return (
        <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';
export const App = () => {
    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])
    return (
        <div style={{fontSize,background}}>
            <div ref={ref1}>{'😎'}</div>
            {[...Array(10)].map((_,i)=>
                <div key={i}>{isView?'😘':'🤣'}</div>
            )}
            <div ref={ref2}>{'😎'}</div>
        </div>
    )
}

Available hooks

| Hook | Description |
| ----------------- | ------------------------------------------------------- |
| useGrid | make it switch value by media query with useEffect |
| useGrids | multiple values can be switched by media queries |
| useMedia | get a match to media query with useEffect |
| useView | get a flag whether the target intersects |
| useLayoutGrid | work like useGrid with useLayoutEffect |
| useLayoutGrids | work like useGrids with useLayoutEffect |
| useLayoutMedia | work like useMedia with useLayoutEffect |
| useLayoutView | work like useView with useLayoutEffect |

Performance Pitfalls

Grid prefix
The grid system uses containers, rows and columns to control layout and alignment.
Learn More
name|prefix|max width|max container width|
:----------|:--|:----------|:--------|
Extra small|xs |<576 px|auto |
Small |sm |>=576 px|540 px |
Medium |md |>=768 px|720 px |
Large |lg |>=992 px|960 px |
Extra large|xl |>=1200 px|1140 px|
Grid Options
name |works|
:-----------|:----|
init |initial value to be specified|
none |value when the element is not visible|
onView |function called when the target intersects| config |config for useGrid viewConfig |config for useMedia mediaConfig |config for useView
same works

export function Note ({children}) {
    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
    return <div style={{width}} />
}