Hooks
/ API Reference
Hooks
/ API Reference

useBreakpoint

A hook that provides a boolean indicating whether the current viewport matches a given breakpoint.

Warning

Using this hook with server rendering could cause layout shifts.


Prefer using pure CSS for layout.

The Gist

'use client'
import { useBreakpoint } from '@weser/hooks'

function Component() {
  const isMobile = useBreakpoint('(max-width: 768px)')

  return <div>Is mobile: {isMobile ? 'yes' : 'no'}</div>
}

Parameters

ParameterTypeDefaultDescription
breakpointstringThe breakpoint to check against.
delaynumber?250The delay in milliseconds to debounce the resize event.

Returns

(boolean) A boolean indicating whether the current viewport matches the given breakpoint.

On this page