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}} />
}