Skip to content

πŸ“πŸ‘οΈ React hooks for building responsive and adaptable web interfaces

License

Notifications You must be signed in to change notification settings

ben-rogerson/mezz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

27 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Mezz

npm downloads minzip package size

πŸ“ 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.

Typesafe completions screenshot

  • πŸ’ͺ 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!