useIsMobile

Installation

Utilisation

import { useIsMobile } from '@/hooks/use-mobile';
 
function ResponsiveComponent() {
  // Retourne true si la largeur de l'écran est inférieure à 768px
  const isMobile = useIsMobile();
 
  return <div>{isMobile ? <p>Version mobile</p> : <p>Version desktop</p>}</div>;
}

API

const isMobile = useIsMobile();

Retour

• isMobile - Valeur booléenne qui indique si l'appareil est considéré comme mobile (largeur d'écran < 768px)

Fonctionnalités

• Détecte automatiquement la taille de l'écran au chargement
• Réagit aux changements de taille de la fenêtre (redimensionnement, rotation)
• Compatible avec le rendu côté serveur (SSR)
• Utilise l'API MediaQueryList pour une détection optimisée

Exemple avancé

import { useIsMobile } from '@/registry/hooks/use-mobile';
 
function AdaptiveLayout() {
  const isMobile = useIsMobile();
 
  return (
    <div className="container">
      <header>{isMobile ? <MobileNavigation /> : <DesktopNavigation />}</header>
 
      <main>
        <section className={isMobile ? 'stack' : 'grid'}>
          {/* Le contenu s'adapte en fonction du type d'appareil */}
          {items.map((item) => (
            <Card key={item.id} size={isMobile ? 'compact' : 'full'} item={item} />
          ))}
        </section>
      </main>
    </div>
  );
}

Notes techniques

• Le seuil de détection mobile est défini à 768px (largeur d'écran inférieure à cette valeur) et peut être modifié en changeant la constante MOBILE_BREAKPOINT dans le code source du hook
• Le hook utilise window.matchMedia pour détecter les changements de taille d'écran
• Lors du rendu côté serveur, la valeur initiale est undefined puis mise à jour après le montage du composant
• Le hook nettoie correctement les écouteurs d'événements lors du démontage du composant