Détecter les appareils mobiles en réaction avec un crochet personnalisé

La conception Web réactive moderne nécessite souvent d'adapter les applications REACT en fonction de la question de savoir si un utilisateur est sur un appareil mobile. Alors que les requêtes multimédias CSS gèrent le style, JavaScript offre une détection de largeur d'écran dynamique pour le rendu conditionnel et les ajustements de comportement. Cet article montre un crochet de réaction personnalisé, useIsMobile, pour une détection efficace des appareils mobiles.

---

Pourquoi JavaScript pour la détection mobile?

Les requêtes multimédias CSS excellent au style, mais manquent de la capacité d'exécuter conditionnellement JavaScript en fonction de la taille de l'écran. Une approche JavaScript est cruciale pour:

✅ Affichage / cache des éléments d'interface utilisateur dynamiquement (par exemple, les menus mobiles). ✅ Optimisation des performances en évitant le rendu inutile sur des écrans plus petits. ✅ Adapter le comportement d'application à la taille de l'écran (par exemple, désactiver les animations sur mobile).

---

Construire le useIsMobile crochet

Ce crochet React détermine si la largeur de l'écran est inférieure à un point d'arrêt défini:

<code class="language-javascript">import { useEffect, useState } from "react";

export function useIsMobile(MOBILE_BREAKPOINT = 768) {
  const [isMobile, setIsMobile] = useState(undefined);

  useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = () => setIsMobile(mql.matches);

    mql.addEventListener("change", onChange);
    return () => mql.removeEventListener("change", onChange);
  }, [MOBILE_BREAKPOINT]);

  return !!isMobile;
}</code>

---

Débarquement du code

1. Initialisation de l'état: const [isMobile, setIsMobile] = useState(undefined); Initialise l'état en undefined.

2. window.matchMedia(): const mql = window.matchMedia( (max-width: $ {mobile_breakpoint - 1} px) ); crée un écran de correspondance de requête multimédia plus étroit que le point d'arrêt (par défaut 768px).

3. Écouteur d'événements: mql.addEventListener("change", onChange); Ajoute un écouteur d'événements pour détecter les modifications de la taille de l'écran. La fonction onChange met directement à jour isMobile avec mql.matches.

4. nettoyage: return () => mql.removeEventListener("change", onChange); supprime l'auditeur lorsque le composant démoule, empêchant les fuites de mémoire.

5. Boolean Retour: return !!isMobile; Renvoie un booléen représentant le statut mobile.

---

en utilisant useIsMobile dans un composant

Voici comment intégrer le crochet:

<code class="language-javascript">import React from "react";
import { useIsMobile } from "./useIsMobile";

export default function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return (
    <div>
      {isMobile ? <p>Mobile Device ?</p> : <p>Desktop ?️</p>}
    </div>
  );
}</code>

Cela rend les différents messages en fonction de la taille de l'écran détectée.

---

Avantages

✅ Léger et efficace: utilise window.matchMedia pour des performances optimisées. ✅ réutilisable: facilement intégré sur plusieurs composants. ✅ Mises à jour en temps réel: Mises à jour dynamiquement sur les modifications de la taille de l'écran. ✅ Personnalisable: Le point d'arrêt est configurable.

---

Conclusion

La détection de taille d'écran basée sur JavaScript est précieuse pour créer des applications REAC vraiment réactives. Le Hook useIsMobile fournit une solution propre et efficace pour la détection des appareils mobiles, permettant des ajustements d'interface utilisateur dynamiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!