Интеграция с React

Импортируйте из responsive-media/react.

import {
  useResponsive,
  useBreakpoints,
  useMediaQuery,
  useContainerState,
} from 'responsive-media/react'

useResponsive<T>()

Возвращает текущее responsive-состояние. Ререндерится только при изменении состояния. Внутри использует useSyncExternalStore. Принимает обобщённый параметр типа для сужения возвращаемого состояния — см. ConfigToState<T>.

import { useResponsive } from 'responsive-media/react'

type MyState = { sm: boolean; lg: boolean }

function App() {
  const { sm, lg } = useResponsive<MyState>()
  return sm ? <MobileNav /> : <DesktopNav />
}

useBreakpoints()

Возвращает упорядоченные хелперы брейкпоинтов. Ререндерится при изменении responsive-состояния.

import { useBreakpoints } from 'responsive-media/react'

function Nav() {
  const { current, isAbove, isBelow, between } = useBreakpoints()
  return (
    <>
      <span>Current: {current}</span>
      {isAbove('sm') ? <DesktopNav /> : <MobileNav />}
      {between('sm', 'lg') && <TabletBanner />}
    </>
  )
}

В отличие от Vue, current — обычная string | null (не ref). Ререндеры запускаются через useSyncExternalStore.

useMediaQuery(query)

boolean

Отслеживает сырую строку CSS media query. SSR-безопасно (возвращает false на сервере).

import { useMediaQuery } from 'responsive-media/react'

function ThemeToggle() {
  const isDark = useMediaQuery('(prefers-color-scheme: dark)')
  const canHover = useMediaQuery('(hover: hover)')
  return <button className={isDark ? 'dark' : 'light'}>Toggle</button>
}

useContainerState(ref, config, options?)

Отслеживает размеры элемента и возвращает объект состояния. Настраивает и убирает ResizeObserver через useEffect.

import { useRef } from 'react'
import { useContainerState } from 'responsive-media/react'

function Card() {
  const ref = useRef<HTMLDivElement>(null)
  const { compact, wide } = useContainerState(ref, {
    compact: [{ type: 'max-width', value: 300 }],
    wide: [{ type: 'min-width', value: 600 }],
  })

  return (
    <div ref={ref}>{compact ? <CompactLayout /> : wide ? <WideLayout /> : <DefaultLayout />}</div>
  )
}

config и options считаются статичными после монтирования. Оборачивайте в useMemo, если они меняются.