Mezz

📐 Mezz is a set of React hooks for building responsive and adaptable web interfaces.

The hooks observe the size of elements and match the breakpoints you supply — simple, type-safe, and fast.

• 💪 Type-safe breakpoint auto-completions
• ✨ Uses the modern ResizeObserver browser API
• ⚡️ Customizable breakpoint naming
• 🌐 Works in all modern browsers

👉 Demos and examples ›

Install

pnpm install mezz

Use

The useWidth hook:

import { useWidth } from 'mezz'

function BlueBox() {
  const width = useWidth({ lg: 500 })
  return <div ref={width.ref}>{width.lg ? 'Large' : 'Small'}</div>
}

The useWidthHeight hook:

import { useWidthHeight } from 'mezz'

function GreenBox() {
  const size = useWidthHeight({
    width: { sm: 0, md: 400, lg: 500 },
    height: { lg: 950 },
  })

  return (
    <div ref={size.ref}>
      {size.width.sm && 'Small'}
      {size.width.md && 'Medium'}
      {size.width.lg && 'Large'}
      {size.height.lg && 'Larger height'}
    </div>
  )
}

The useBodyWidth hook:

import { useBodyWidth } from 'mezz'

function App() {
  const body = useBodyWidth({ lg: 500 })
  return body.lg ? 'Large' : 'Small'
}

👉 More demos and examples ›

---

Consider donating some 🍕 if you enjoy!