Hook useNavigatorOnLine de React

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser le hook useNavigatorOnLine dans React pour vérifier si un client est en ligne ou hors ligne. Nous allons créer une fonction pour obtenir l'état de connexion en ligne du client à l'aide de l'API web Navigator.onLine, utiliser le hook useState() pour créer une variable d'état appropriée et ajouter des écouteurs pour les événements appropriés à l'aide du hook useEffect() pour mettre à jour l'état et nettoyer ces écouteurs lors du démontage. Enfin, nous allons renvoyer la variable d'état de l'état de connexion en ligne pour afficher un message en fonction de l'état de connexion en ligne actuel.

Skills Graph

React useNavigatorOnLine Hook

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Pour vérifier si le client est en ligne ou hors ligne, vous pouvez créer une fonction getOnLineStatus qui utilise l'API web Navigator.onLine. Ensuite, pour implémenter cette fonctionnalité dans un composant React, vous pouvez utiliser le hook personnalisé useNavigatorOnLine. Ce hook crée une variable d'état appelée status à l'aide du hook useState() et la définit sur la valeur renvoyée par getOnLineStatus(). Le hook useEffect() est utilisé pour ajouter des écouteurs d'événements pour le changement d'état en ligne/hors ligne, mettre à jour la variable d'état status en conséquence et nettoyer ces écouteurs lorsque le composant est démonté. Enfin, la variable isOnline renvoyée par useNavigatorOnLine() peut être utilisée pour afficher un message indiquant si le client est en ligne ou hors ligne.

const getOnLineStatus = () =>
  typeof navigator !== "undefined" && typeof navigator.onLine === "boolean"
    ? navigator.onLine
    : true;

const useNavigatorOnLine = () => {
  const [status, setStatus] = React.useState(getOnLineStatus());

  const setOnline = () => setStatus(true);
  const setOffline = () => setStatus(false);

  React.useEffect(() => {
    window.addEventListener("online", setOnline);
    window.addEventListener("offline", setOffline);

    return () => {
      window.removeEventListener("online", setOnline);
      window.removeEventListener("offline", setOffline);
    };
  }, []);

  return status;
};

const StatusIndicator = () => {
  const isOnline = useNavigatorOnLine();

  return <span>You are {isOnline ? "online" : "offline"}.</span>;
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <StatusIndicator />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le hook React useNavigatorOnLine. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.