🤏 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.
npm i use-gridgit clone github.com/tseijp/use-grid
cd use-grid
npm run init
npm run docs
- open browser and visit localhost:3000
Now you can go to our demo, and try its usage.
switch by media query
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 });
const handler = () => set((p)=>({md: p.lg, lg: p.md}))
render (
<div
style={{fontSize, width}}
onClick={handler}>
{isMedium?'😃':'😢'}
</div>
);use grid system
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]);
render (
<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';
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])
render (
<div style={{fontSize,background}}>
<div ref={ref1}>{'😎'}</div>
{[...Array(10).keys()].map(i =>
<div key={i}>{isView?'😘':'🤣'}</div>
)}
<div ref={ref2}>{'😎'}</div>
</div>
)| Hook | Description |
|---|---|
useGrid |
make it switch value by media query using useEffect |
useGrids |
multiple values can be switched by media queries |
useMedia |
get a match to media query using useEffect |
useView |
get a flag whether the target intersects |
useLayoutGrid |
work like useGrid using useLayoutEffect |
useLayoutGrids |
work like useGrids using useLayoutEffect |
useLayoutMedia |
work like useMedia using useLayoutEffect |
useLayoutView |
work like useView using useLayoutEffect |
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
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
render (
<div style={{width}} />
)
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![mergify[bot] avatar](https://avatars.githubusercontent.com/in/10562?v=4 "mergify[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent