use-grid

šŸ¤ use-grid is a hook to build responsive layouts of all shapes and sizes.

Stats

StarsIssuesVersionUpdatedCreatedSize
use-grid
251.0.110 months ago2 years agoMinified + gzip package size for use-grid in KB

Readme

ļøšŸ¤ use-grid

build passin build passin build passin
license MIT npm version 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 i -D
npm start

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.