Logo Hpv 4 Learning
Academy
Web Agency
react

React: come usare la dark-mode e localstorage

By Hpv4Learning 1 min25/04/2021
"Come si ottiene la DarkMode in React utilizzando useState, useEffect ed interagendo con il localStorage"
Dark Mode

Troverai nel progetto

Che cosa realizzeremo in questo progetto ?

Realizzeremo una delle funzionalità più diffuse nel web moderno, ovvero la darkmode. Otterremo questo combinando useState useEffect e localStorage

Come si ottiene la Dark Mode in React ?

Il modo più banale per ottenre la darkmode è quello di utilizzare due classi css in cui andare a definire le medesime variabili css ma con tonanlità opposte.

.light-mode {
  --clr-bg: #efefef;
  --clr-text: #222;
  --clr-primary: rgb(56, 146, 194);
  --clr-card: #eeeeee;
}

.dark-mode {
  --clr-bg: #111;
  --clr-text: #d4d3d3;
  --clr-primary: #df372b;
  --clr-card: #272724;
}

Usare lo useState per cambiare modalità

Per prima cosa definiremo uno state in cui tenere traccia della modalità scelta dall'utente, che di default sarà light.

const [theme, setTheme] = useState('light');

2ndo avremo bisogno di definire una funzione per cambiare il nostro tema

  const cambiaTema = () => {
    if (theme === "light-mode") {
      setTheme("dark-mode");
    } else {
      setTheme("light-mode");
    }
  };

Usare lo useEffect per manipolare il Dom

Il terzo passaggio sarà quello di servirsi dello useEffect e manipolare il Dom per cambiare la classe del html tag in base al valore di theme.

 useEffect(() => {
    //Attacca classe al html tag
    document.documentElement.className = theme;
  }, [theme]);

Usare il localStorage

Infine l'ultimo passaggio è di utilizzare il localStorage per permettere ad un utente di ritorno di visualizzare il sito nella stessa modalità con cui lo aveva lasciato l'utlima volta.

Scriverememo nel localStorage nel nostro useEffect

 useEffect(() => {
    document.documentElement.className = theme;

    //inserisco valore di theme nel localStorage ogni volta viene mutato il        suo state
    localStorage.setItem("theme", theme);
  }, [theme]);

E poi andremo a ridefinire la nostra definizione iniziale dello state in modo che se presente il valore nel localStorage, vada a settare quest'ultimo come valore iniziale dello state di theme.

const getFromLocalStorage = () => {
  if (localStorage.getItem("theme")) {
    return localStorage.getItem("theme");
  } else {
    return "light-mode";
  }
};

Usiamo la funzione per settare il nuovo valore.

const [theme, setTheme] = useState(getFromLocalStorage());

Prossimo Progetto

Come funziona lo useEffect in React: Esempio pratico

Come funziona lo useEffect in React: Esempio pratico

Un menu navigabile di con offerte e proposte di viaggi e vacanze

react

Informazioni aggiuntive

Livello: Principiante

225 lezioni

25 ore di videocorso

11 Progetti pratici

3052 studenti iscritti

Voto Medio:

4.5

Prezzo originale: 29.99€

Supporto Premium

text

Scopri il corso completo

React.js e Redux in Italiano: Te...


3052

4.5

Copertina
React.js e Redux in Italian...