Skip to main content

🤏 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.

function App () {
  const [fontSize, set] = useGrid({xs: '2rem', md: 50, lg: 100})
  const handleClick = () => set(p => ({...p, md: p.lg, lg: p.md}))
  return (
    <div
      style={{fontSize}}
      onClick={handleClick}>
      🤏 use-grid
    </div>
  )
}

function App () {
  const [fontSize, set] = useGrid({xs: '2rem', md: 50, lg: 100})
  const handleClick = () => set(p => ({...p, md: p.lg, lg: p.md}))
  return (
    <div
      style={{fontSize}}
      onClick={handleClick}>
      🤏 use-grid
    </div>
  )
}