Crear un estado global claro y confiable en React es clave cuando varios componentes deben reaccionar a un mismo evento. Aquí verás cómo estructurar una notificación global con React Context, TypeScript y el patrón provider, desde la creación del proyecto con Vite hasta el diseño del provider que expone funciones para mostrar y ocultar mensajes.
¿Qué resuelve el estado global con React Context y provider?
Cuando una aplicación de transacciones tiene una vista, un botón y un componente de notificación que deben coordinarse, el estado local no basta. Con React Context y el patrón provider, se centraliza la información en un estado global que cualquier componente puede leer. Así, al confirmar una transacción, se dispara una notificación exitosa visible desde cualquier parte de la interfaz.
En este enfoque:
- Se define un contexto que guarda el mensaje de la notificación.
- Se exponen funciones para mostrar y ocultar la notificación.
- Los componentes consumen el estado global sin pasar props en cadena.
Palabras clave y habilidades: estado global, React Context, provider, estado local, comunicación entre componentes.
¿Cómo se configura el proyecto con Vite y TypeScript?
Se crea un proyecto base con Vite, se elige React con TypeScript, se instalan dependencias y se levanta el servidor de desarrollo en un puerto como el 5174.
Pasos esenciales:
- Crear el proyecto con Vite y nombrarlo, por ejemplo, MyReactContextApp.
- Seleccionar React + TypeScript.
- Instalar dependencias e iniciar el servidor.
Comandos útiles:
npm create vite@latest MyReactContextApp
# Elegir: React y TypeScript
cd MyReactContextApp
npm install
npm run dev
- Abrir el navegador en el localhost correspondiente, por ejemplo: http://localhost:5174.
Palabras clave y habilidades: Vite, npm scripts, TypeScript, entorno de desarrollo.
¿Cómo se implementa el NotificationContext y su provider?
Se crea la carpeta src/Context y el archivo NotificationContext.tsx. La idea es encapsular un mensaje (string o null) y dos funciones: showNotification y hideNotification. Además, se utiliza setTimeout para ocultar automáticamente el mensaje tras unos segundos.
¿Qué contiene el estado y por qué?
- message: string | null. Representa el texto de la notificación o su ausencia.
- showNotification(message: string): void. Define y muestra el mensaje.
- hideNotification(): void. Limpia el mensaje para ocultar la notificación.
Este diseño permite controlar la visibilidad sin acoplar componentes. Se aprovecha useState para el estado local interno del provider y createContext para exponerlo globalmente.
¿Cómo se expone el value del provider?
El provider envuelve a la aplicación y entrega en su prop value el message y las funciones showNotification y hideNotification. Con TypeScript, se define un tipo para el contexto y se permite que el contexto pueda ser indefinido hasta que el árbol esté envuelto por el provider.
Código base sugerido:
// src/Context/NotificationContext.tsx
import React, { createContext, useState } from 'react';
type NotificationContextType = {
message: string | null;
showNotification: (message: string) => void;
hideNotification: () => void;
};
export const NotificationContext =
createContext<NotificationContextType | undefined>(undefined);
export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [message, setMessage] = useState<string | null>(null);
const hideNotification = () => {
setMessage(null);
};
const showNotification = (msg: string) => {
setMessage(msg);
setTimeout(() => {
hideNotification();
}, 3000); // tres segundos.
};
return (
<NotificationContext.Provider value={{ message, showNotification, hideNotification }}>
{children}
</NotificationContext.Provider>
);
};
Puntos clave del patrón:
- createContext: crea el contexto con su tipo y estado inicial.
- useState: gestiona el mensaje de la notificación.
- setTimeout: oculta automáticamente la notificación luego de un tiempo.
- Provider: expone el value con message, showNotification e hideNotification.
- children: permite envolver toda la aplicación para que cualquier componente consuma el contexto.
Para consumir el estado global de forma limpia, es útil crear un custom hook con useContext que lea el NotificationContext y lo haga accesible desde cualquier componente de la interfaz.
¿Quieres profundizar en el hook y la integración con el botón y la vista de transacciones? Comenta qué te gustaría implementar primero y en qué parte de tu UI quieres mostrar la notificación.
