https://github.com/ben-rogerson/mezz

📐👁️ React hooks for building responsive and adaptable web interfaces
https://github.com/ben-rogerson/mezz

hooks react resizeobserver

Last synced: 3 months ago
JSON representation

📐👁️ React hooks for building responsive and adaptable web interfaces

• Host: GitHub
• URL: https://github.com/ben-rogerson/mezz
• Owner: ben-rogerson
• License: mit
• Created: 2023-08-08T07:37:15.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-24T06:13:26.000Z (over 1 year ago)
• Last Synced: 2025-02-27T02:11:56.990Z (8 months ago)
• Topics: hooks, react, resizeobserver
• Language: TypeScript
• Homepage: https://mezz.benrogerson.dev
• Size: 202 KB
• Stars: 35
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Mezz

[![npm](https://img.shields.io/npm/v/mezz?colorA=fdbe90&colorB=fffaeb)](https://www.npmjs.com/package/mezz)

[![downloads](https://img.shields.io/npm/dm/mezz?colorA=fdbe90&colorB=fffaeb)](https://www.npmjs.com/package/mezz)

[![minzip package size](https://img.shields.io/bundlephobia/minzip/mezz?label=minzip%20size&colorA=fdbe90&colorB=fffaeb)](https://bundlephobia.com/package/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](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) browser API

- ⚡️ Customizable breakpoint naming

- 🌐 Works in all modern browsers

[👉 **Demos and examples ›**](https://mezz.benrogerson.dev/)

## Install

```shell

pnpm install mezz

```

## Use

The **useWidth** hook:

```tsx

import { useWidth } from 'mezz'

function BlueBox() {

  const width = useWidth({ lg: 500 })

  return 
{width.lg ? 'Large' : 'Small'}

}

```


The **useWidthHeight** hook:

```tsx

import { useWidthHeight } from 'mezz'

function GreenBox() {

  const size = useWidthHeight({

    width: { sm: 0, md: 400, lg: 500 },

    height: { lg: 950 },

  })

  return (

    


      {size.width.sm && 'Small'}

      {size.width.md && 'Medium'}

      {size.width.lg && 'Large'}

      {size.height.lg && 'Larger height'}

    

  )

}

```


The **useBodyWidth** hook:

```tsx

import { useBodyWidth } from 'mezz'

function App() {

  const body = useBodyWidth({ lg: 500 })

  return body.lg ? 'Large' : 'Small'

}

```

[👉 **More demos and examples ›**](https://mezz.benrogerson.dev/)

---

[Consider donating some 🍕 if you enjoy!](https://www.buymeacoffee.com/benrogerson)