๐ค use-grid
๏ธ
- 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
- 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.
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}} />
}