useWindowSize

Suit la largeur et la hauteur actuelles de la fenêtre, se mettant à jour lors du redimensionnement.

Import

import { useWindowSize } from 'asterui'

Utilisation

function WindowSizeExample() {
  const { width, height } = useWindowSize()

  return (
    <div>
      <p>Fenêtre : {width} x {height}</p>
      {width < 768 && <MobileLayout />}
      {width >= 768 && <DesktopLayout />}
    </div>
  )
}

Valeur de retour

Propriété	Type	Description
width	number	Largeur actuelle de la fenêtre en pixels
height	number	Hauteur actuelle de la fenêtre en pixels

Note

Pour une logique responsive basée sur les points de rupture, envisagez d’utiliser useBreakpoint à la place, qui fournit des méthodes helper comme isAbove() et isBelow().