Comment créer un mode sombre dans React sans utiliser React Context

Il est devenu proéminent pour les applications d'avoir un paramètre qui vous permet de basculer entre les modes sombre et aussi clair. Peut-être que c'est dû à la popularité des interfaces utilisateur sombres, peut-être que c'est parce que les apps deviennent progressivement beaucoup plus configurables.

Le contexte React est un moyen facile de partager des informations dans le monde entier, mais il peut rendre la réutilisation des pièces plus difficile. Comme alternative, vous pouvez développer un composant interrupteur de réglage de l'obscurité qui utilise les crochets useEffect et aussi useState plutôt que le contexte. Il basculera un attribut de données sur l'aspect du corps que les styles CSS peuvent cibler.

Ce dont vous aurez besoin

Pour adhérer ensemble avec ce tutoriel, vous aurez besoin de ce qui suit :

  • Une variation récente de Node installée sur votre équipement.
  • Une compréhension standard de React et de React hooks.
  • Un travail React de démarrage. Il suffit de créer une application React et aussi vous êtes prêt à partir.

Créer un composant de bouton

L'élément bouton sera responsable de faire basculer le motif de sombre à clair. Dans une application réelle, ce bouton peut être un composant de la partie Navbar.

Dans le dossier src, développez une toute nouvelle donnée appelée Button.js et incluez le code suivant.

Tout d'abord, importez le hook useState() de React. Vous l'utiliserez pour suivre le thème existant.

Voir aussi :  Comment valider des chaînes à l'aide de méthodes booléennes en Python

Dans l'élément Button, initialisez l'état à sombre. La fonction handleToggle() s'occupera de la fonctionnalité de basculement. Elle s'exécute à chaque fois que l'interrupteur est cliqué.

Cet élément fait également basculer le texte du bouton lorsqu'il modifie le motif.

Pour afficher l'élément Button, importez-le directement dans App.js.

Créez les styles CSS

Pour l'instant, le fait de cliquer sur le bouton ne modifie pas l'interface utilisateur de l'application React. Pour cela, vous devrez certainement d'abord créer les styles CSS pour le réglage sombre et clair.

Dans App.css, incluez ce qui suit .

Ici, vous spécifiez les designs de l'élément body en utilisant des caractéristiques d'information. Il y a la caractéristique d'information du thème clair et l'associé d'information du motif sombre. Chacun d'eux possède des variables CSS avec des nuances différentes. L'utilisation des caractéristiques d'information CSS vous permettra de modifier les styles en fonction des données. Si un utilisateur choisit un motif sombre, vous pouvez définir le crédit de données du corps sur sombre et l'interface utilisateur sera modifiée.

Vous pouvez de même modifier les styles des éléments de bouton pour qu'ils se transforment avec le motif.

Modifier l'élément de bouton pour faire basculer les styles.

Pour faire basculer les styles définis dans le fichier CSS, vous devrez certainement définir les données dans le composant body dans la fonction handleToggle().

Dans Button.js, modifiez handleToggle() comme suit :

Si vous cliquez sur l'interrupteur, l'historique devrait basculer de sombre à clair ou de clair à sombre. Néanmoins, si vous revitalisez la page, le motif se réinitialise. Pour faire persister la configuration du style, gardez le choix du thème dans la mémoire du voisinage.

Voir aussi :  WordPress vaut-il toujours la peine d'être utilisé en 2021 ?

Persistance de la préférence de l'utilisateur dans le stockage local

Vous devez récupérer la préférence du client dès que la partie Bouton fournit. Le crochet useEffect() est excellent pour cela car il suit chaque fourniture.

Avant d'obtenir le style à partir du stockage de voisinage, vous devez le stocker initialement.

Créez une nouvelle fonction appelée storeUserPreference() dans Button.js.

Cette fonction obtient le choix individuel comme argument ainsi que le stocke comme un élément appelé thème.

Vous appellerez cette fonction chaque fois que le client basculera le motif. Donc, changez la fonction handleToggle() pour ressembler à ceci :

La fonction suivante obtient le style à partir du stockage de voisinage :

Vous l'utiliserez dans le crochet useEffect pour que chaque fois que la pièce effectue un rendu, elle récupère le choix dans le stockage local pour mettre à jour le style.

Obtenir la préférence de l'utilisateur à partir des paramètres du navigateur

Pour une expérience client encore bien meilleure, vous pouvez utiliser l'option prefers- color-scheme La fonction de média CSS pour établir le thème. Celui-ci doit refléter les configurations du système d'un individu qu'il peut gérer via son système d'exploitation ou son navigateur Web. Le réglage peut être soit clair, soit foncé. Dans votre application, vous auriez certainement besoin d'inspecter cette configuration immédiatement après les tons de l'élément de commutation. Cela signifie mettre en œuvre cette performance dans le crochet useEffect().

Voir aussi :  Comment positionner des éléments Web avec l'alignement vertical CSS

Tout d'abord, créez une fonction qui obtient la préférence de l'utilisateur.

Dans Button.js, ajoutez l'élément suivant.

Ensuite, modifiez le hook useEffect() pour obtenir le choix de l'enquête média et l'utiliser si aucun style n'est intégré dans le stockage régional.

Si vous redémarrez votre application, le motif doit correspondre aux paramètres de votre système.

Utilisation de React Context pour basculer le mode sombre.

Vous pouvez utiliser des caractéristiques de données, des CSS, ainsi que des crochets React pour basculer le style d'une application React.

Une autre méthode pour gérer l'obscurité dans React consiste à utiliser l'API de contexte. Le contexte de réponse vous permet de partager des informations entre les éléments sans avoir besoin de les transmettre par le biais de props. Lorsque vous l'utilisez pour faire basculer les motifs, vous créez un contexte de thème auquel vous pouvez accéder dans toute l'application. Vous pouvez après cela utiliser la valeur du motif pour utiliser des styles correspondants.

Bien que cette stratégie fonctionne, l'utilisation des caractéristiques de données CSS est moins complexe.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.