Navigation responsive avec un Hook React personnalisé

Introduction

Dans ce projet, vous allez apprendre à créer un Hook React personnalisé appelé useWindowSize pour obtenir la taille actuelle de la fenêtre et l'utiliser pour rendre conditionnellement la barre de navigation dans une application web.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Implémenter le Hook personnalisé useWindowSize pour obtenir la taille actuelle de la fenêtre
• Utiliser le Hook useWindowSize dans le composant App pour mettre à jour la barre de navigation en fonction de la largeur de la fenêtre

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer un Hook React personnalisé pour encapsuler une fonctionnalité réutilisable
• Utiliser les hooks useState et useEffect pour gérer l'état et les effets de bord
• Rendre conditionnellement des composants en fonction de la taille actuelle de la fenêtre

Implémentez le Hook useWindowSize

Pour commencer, ouvrez l'éditeur. Vous pouvez voir les fichiers suivants à partir de votre éditeur.

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

Dans cette étape, vous allez apprendre à implémenter le Hook personnalisé useWindowSize pour obtenir la taille actuelle de la fenêtre.

1. Ouvrez le fichier useWindowSize.js situé dans le répertoire src/Hooks.
2. Dans ce fichier, importez les dépendances nécessaires :

import { useEffect, useState } from "react";

3. Définissez la fonction useWindowSize :

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

Explication :

• La fonction useWindowSize renvoie un objet contenant la largeur et la hauteur actuelles de la fenêtre.
• Le hook useState est utilisé pour créer une variable d'état windowSize et une fonction setWindowSize pour la mettre à jour.
• La fonction changeWindowSize est définie pour mettre à jour l'état windowSize lorsque la fenêtre est redimensionnée.
• Le hook useEffect est utilisé pour ajouter un écouteur d'événements pour l'événement resize et le supprimer lorsque le composant est démonté.
• L'objet windowSize est renvoyé par la fonction useWindowSize.

Testez l'application

1. Enregistrez le fichier useWindowSize.js.
2. Téléchargez les dépendances à l'aide de la commande npm install dans le terminal, attendez que les dépendances aient fini de se télécharger puis lancez le projet à l'aide de la commande npm start.
3. Une fois le projet démarré avec succès, cliquez sur "Web 8080" pour le prévisualiser dans votre navigateur.
4. L'effet est que lorsque l'utilisateur redimensionne la fenêtre, le contenu du bas montrera la largeur de la fenêtre, et la barre de navigation supérieure masquera deux sous-menus sur les écrans petits et montrera trois menus sur les écrans grands.

Félicitations ! Vous avez réussi à implémenter le Hook useWindowSize et à l'utiliser dans le composant App pour mettre à jour la barre de navigation en fonction de la taille de la fenêtre.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.