useResponsive

Responsive breakpoint flags based on window width.

Import

import { useResponsive } from '@kamod-ch/hooks'

Live demo

Basic demo

Responsive breakpoint flags based on window width.

Browser-only demo

This demo starts after the page mounts in the browser.

import { useEffect, useState } from 'preact/hooks'
import { configResponsive, useResponsive } from '@kamod-ch/hooks'

export default function UseResponsiveDemo() {
  const [width, setWidth] = useState(0)
  const info = useResponsive()

  useEffect(() => {
    configResponsive({ mobile: 0, tablet: 640, desktop: 1024 })
    const update = () => setWidth(window.innerWidth)
    update()
    window.addEventListener('resize', update)
    return () => window.removeEventListener('resize', update)
  }, [])

  return (
    <div>
      <p><strong>Window width:</strong> {width}</p>
      <pre>{JSON.stringify(info, null, 2)}</pre>
      <p>Resize the browser window to see the flags update.</p>
    </div>
  )
}

API

TypeScript signature

type ResponsiveConfig = Record<string, number>;
type ResponsiveInfo = Record<string, boolean>;
export declare function configResponsive(config: ResponsiveConfig): void;
declare function useResponsive(): ResponsiveInfo;
export default useResponsive;
/

SSR considerations

This hook touches browser APIs. Render it after mount or guard it with BrowserOnly in SSR and static builds.

Browser compatibility

Requires the corresponding browser API to exist in the current environment.