TypeScript icon, indicating that this package has built-in type declarations

1.0.1ย โ€ขย Publicย โ€ขย Published

๏ธ๐Ÿค 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
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,}))}>

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%"}}>
            { (emoji, i) =>
                <div style={{width:ws[i]}}>{emoji}</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) =>
                ? {md:150, lg:250}
                : {md:100, lg:200})
    }, [ref1, ref2])
    return (
        <div style={{fontSize,background}}>
            <div ref={ref1}>{'๐Ÿ˜Ž'}</div>
                <div key={i}>{isView?'๐Ÿ˜˜':'๐Ÿคฃ'}</div>
            <div ref={ref2}>{'๐Ÿ˜Ž'}</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}} />

Package Sidebar


npm i use-grid

Weekly Downloads






Unpacked Size

66.9 kB

Total Files


Last publish


  • tsei