Usare useContext per aprire una Sidebar

Che cosa realizzeremo in questo progetto ?

In questa applicazione creeremo un context e useremo lo useContext per aprire e chiudere una Sidebar. In questo modo potremmo passare props e state tra componenti che non sono direttamente correlati.

Di che cosa avremmo bisogno ?

• useState: Ci servirà uno state per controllare che la nostra sidebar sia aperta o chiusa.

  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

• createContext: Una funzione che permette di creare un context
• useContext: Hook che permette di utilizzare un context ed accedervi ai valori.

Come creare un context in React ?

Per creare un context si utilizza la funzione React.createContext che ci ritornerà un Context.Provider e un Context.Consumer. Come possiamo dedurre dai nomi uno "provvederà" i valori e l'altro sarà il "consumatore finale"

const AppContext = React.createContext();

Creiamo ora il nostro Provider

const AppProvider = ({ children }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  return (
    <AppContext.Provider
      value={}
    >
      {children}
    </AppContext.Provider>
  );
};

All'interno della props value possiamo passare tutti i valori, funzioni, state che vogliamo siano accessibili da altri componenti che saranno i Consumer rispetto al nostro Provider.

const AppProvider = ({ children }) => {
  //..state

  const openSidebar = () => setIsSidebarOpen(true);
  const closeSidebar = () => setIsSidebarOpen(false);

  return (
    <AppContext.Provider
      value={{
        isSidebarOpen,
        openSidebar,
        closeSidebar,
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

Come accedere ai valori del Context

Il nostro provider è pronto, ora non ci rimane che definire quali componenti portanno accedervi e in essi accedere ai valori del context.

Per prima cosa esportiamo il nostro AppProvider

export {AppProvider} 

ed importiamolo nel nostro index.js. Il nostro AppProvider components accetto come parametro children e come children passeremo tutta la nostra App.

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
import { AppProvider } from "./context";
const root = createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <AppProvider>
      <App />
    </AppProvider>
  </React.StrictMode>
);

In questo modo tutti i nostri children del nostro provider potranno accedere ai valori del nostro Provider

Come usare useContext Hook

useContext è l'hook che si usa per accedere e consumare un context. Il miglior modo di usarlo è quello di creare un customHook che ritorni direattamente i valori del context.

Per fare questo nel nostro file con il nostro AppProvider andiamo a creare un customHook che poi esporteremo insieme al nostro provider.

const useGlobalContext = () => {
  return useContext(AppContext);
};

export { AppProvider, useGlobalContext };

Dopo andiamo nella nostra Navbar e utilizziamo il nostro hook per importare il la funzione per aprire la nostra sidebar.

//...other imports
import { useGlobalContext } from "./context";

const Navbar = () => {
  const { openSidebar } = useGlobalContext();
//...JSX

E nella nostra Sidebar invece la funzione per chiudere la Sidebar e lo state per controllare che sia aperta.

//...other imports
import { useGlobalContext } from "./context";
const Sidebar = () => {
  const { isSidebarOpen, closeSidebar } = useGlobalContext();
  //...JSX