Création d'une bascule en mode sombre dans React avec l'API contextuelle

Le mode sombre est une fonctionnalité incontournable dans les applications Web modernes. Il améliore l’expérience utilisateur et peut réduire la fatigue oculaire. Dans cet article, nous expliquerons comment implémenter un basculement en mode sombre dans une application React à l'aide de l'API Context pour gérer l'état de manière globale.

Nous allons créer une application simple dans laquelle les utilisateurs pourront basculer entre les modes sombre et clair, leurs préférences étant stockées dans localStorage afin qu'elles persistent même après avoir quitté ou rechargé la page.

Étape 1 : Configurer le contexte

La première étape consiste à créer un ThemeContext qui fournira l'état du mode sombre et la fonction de basculement à n'importe quel composant de l'application.

// src/context/ThemeContext.js
import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(() => {
    const savedMode = localStorage.getItem('dark-mode');
    return savedMode === 'true' || false;
  });

  useEffect(() => {
    localStorage.setItem('dark-mode', darkMode);
    document.body.className = darkMode ? 'dark-mode' : '';
  }, [darkMode]);

  const toggleDarkMode = () => {
    setDarkMode((prevMode) => !prevMode);
  };

  return (
    <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

Ici, nous utilisons useState pour initialiser le thème basé sur localStorage. useEffect garantit que chaque fois que le thème change, il met à jour localStorage et applique la classe appropriée à l'élément body.

Étape 2 : créer le composant bascule

Ici, nous utilisons useContext pour consommer les fonctions darkModevalue et toggleDarkMode du ThemeContext.

// src/components/ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

const ThemeToggle = () => {
  const { darkMode, toggleDarkMode } = useContext(ThemeContext);

  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </button>
  );
};

export default ThemeToggle;

Étape 3 : appliquer les styles du mode sombre

Pour voir le mode sombre en action, vous devrez ajouter quelques styles CSS. Pour plus de simplicité, nous appliquerons un thème sombre à l'élément body.

/* src/styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-color: #121212;
  color: white;
}

Étape 4 : configurer le composant d'application

Ici, nous enveloppons l'intégralité de l'application dans ThemeProvider, ce qui permet à l'état du mode sombre et à la fonction de bascule d'être disponibles dans le monde entier.

// src/App.js
import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import ThemeToggle from './components/ThemeToggle';
import './styles.css';

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <h1>Dark Mode Toggle with Context API</h1>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

En utilisant l'API Context de React, nous avons rendu l'état du mode sombre facilement accessible dans l'application sans perçage. L'ajout de localStorage garantit que la préférence de thème persiste, même après un rechargement ou une nouvelle page.

N'hésitez pas à modifier cette implémentation de base en ajoutant plus de composants et de styles selon vos besoins.

Si vous souhaitez voir plus de mon travail, consultez mon portfolio vrushikvisavadiya

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!