useContext hook

Leggi il valore del context piu vicino.

Uso

useContext legge il valore fornito dal Context.Provider piu vicino.

const value = useContext(Context);

Se non esiste un provider sopra il componente, Wompo ritorna il valore predefinito passato a createContext.

Esempio: utente autenticato

Questo esempio condivide l'utente corrente con un componente annidato senza passarlo come prop.

import { createContext, defineWompo, html, useContext, useState } from 'wompo';

const UserContext = createContext(null);

function UserInfo() {
  const user = useContext(UserContext);

  if (!user) {
    return html`<p>L'utente non e' autenticato.</p>`;
  }

  return html`
    <p>
      L'utente e' ${user.name} ${user.lastName}.
    </p>
  `;
}

function App() {
  const [user, setUser] = useState(null);
  const login = () => setUser({ name: 'Tongi', lastName: 'Patongi' });
  const logout = () => setUser(null);

  return html`
    <${UserContext.Provider} value=${user}>
      <button @click=${user ? logout : login}>
        ${user ? 'Log out' : 'Log in'}
      </button>
      <${UserInfo} />
    </${UserContext.Provider}>
  `;
}

defineWompo(App);
defineWompo(UserInfo);

Vince il provider piu vicino

Quando piu provider dello stesso context sono annidati, useContext legge quello piu vicino.

function Page() {
  return html`
    <${ThemeContext.Provider} value="light">
      <${ThemeContext.Provider} value="dark">
        <${Toolbar} />
      </${ThemeContext.Provider}>
    </${ThemeContext.Provider}>
  `;
}

In questo esempio, Toolbar riceve dark.