En aplicaciones React, puede ser necesario que varios componentes compartan datos. Esto puede complicarse si tenemos que pasar props por múltiples niveles de componentes. Context API resuelve este problema permitiéndonos crear un contexto global al que varios componentes pueden acceder, sin importar en qué nivel del árbol estén.

1. Uso de Context API para compartir estado entre componentes

Con Context API:

1. Creamos un contexto con React.createContext().
2. Proveemos el contexto a través de un componente Provider, que envuelve los componentes que necesitan acceso a los datos.
3. Consumimos el contexto en los componentes hijos usando el Hook useContext.

Ejemplo básico de Context API:

1import React, { createContext, useContext, useState } from 'react';
2
3// Crear el contexto
4const UsuarioContext = createContext();
5
6// Componente proveedor que envuelve a los componentes que necesitan el contexto
7function UsuarioProvider({ children }) {
8  const [usuario, setUsuario] = useState("Ana");
9
10  return (
11    <UsuarioContext.Provider value={{ usuario, setUsuario }}>
12      {children}
13    </UsuarioContext.Provider>
14  );
15}
16
17// Componente que consume el contexto
18function MostrarUsuario() {
19  const { usuario } = useContext(UsuarioContext);
20  return <p>Usuario: {usuario}</p>;
21}
22
23// Componente principal
24function App() {
25  return (
26    <UsuarioProvider>
27      <MostrarUsuario />
28    </UsuarioProvider>
29  );
30}
31
32export default App;

En este ejemplo:

• UsuarioProvider es el proveedor del contexto y tiene el estado usuario.
• MostrarUsuario es un componente que consume el contexto y muestra el valor de usuario.

2. Ejercicio práctico: Tema oscuro/claro con Context

Vamos a crear una aplicación con tema oscuro y claro usando Context API. Tendremos un botón para alternar entre los temas, y el color de fondo cambiará en función del tema seleccionado.

1import React, { createContext, useContext, useState } from 'react';
2
3// Crear el contexto de Tema
4const TemaContext = createContext();
5
6// Proveedor de Tema
7function TemaProvider({ children }) {
8  const [temaOscuro, setTemaOscuro] = useState(false);
9
10  const alternarTema = () => {
11    setTemaOscuro((prevTemaOscuro) => !prevTemaOscuro);
12  };
13
14  return (
15    <TemaContext.Provider value={{ temaOscuro, alternarTema }}>
16      {children}
17    </TemaContext.Provider>
18  );
19}
20
21// Componente que consume el contexto de Tema
22function BotonTema() {
23  const { temaOscuro, alternarTema } = useContext(TemaContext);
24
25  return (
26    <button onClick={alternarTema} style={{
27      padding: '10px',
28      marginTop: '20px',
29      cursor: 'pointer'
30    }}>
31      Cambiar a {temaOscuro ? "Tema Claro" : "Tema Oscuro"}
32    </button>
33  );
34}
35
36// Componente que muestra el tema actual
37function AplicacionConTema() {
38  const { temaOscuro } = useContext(TemaContext);
39
40  return (
41    <div
42      style={{
43        backgroundColor: temaOscuro ? '#333' : '#FFF',
44        color: temaOscuro ? '#FFF' : '#333',
45        minHeight: '100vh',
46        display: 'flex',
47        flexDirection: 'column',
48        alignItems: 'center',
49        justifyContent: 'center'
50      }}
51    >
52      <h1>{temaOscuro ? "Tema Oscuro" : "Tema Claro"}</h1>
53      <BotonTema />
54    </div>
55  );
56}
57
58// Componente principal
59function App() {
60  return (
61    <TemaProvider>
62      <AplicacionConTema />
63    </TemaProvider>
64  );
65}
66
67export default App;

En este ejercicio:

1. Creamos un contexto TemaContext para manejar el tema.
2. TemaProvider mantiene el estado temaOscuro, que indica si el tema es oscuro o claro, y la función alternarTema para cambiar entre los temas.
3. AplicacionConTema cambia el estilo de fondo y texto según el valor de temaOscuro.
4. BotonTema usa alternarTema para cambiar el tema al hacer clic.

Esta aplicación muestra cómo compartir el estado global del tema entre componentes y aplicar estilos dinámicos, proporcionando una experiencia de usuario personalizada.