Creación de Notificaciones con React Context y Custom Hooks

¿Cómo usar React Context y el patrón Provider para un sistema de notificaciones?

¡Hola, entusiastas de React! En este tutorial, profundizaremos en cómo implementar un sistema de notificaciones usando React Context y el patrón Provider. Además, mejoraremos la implementación creando un custom hook para manejar nuestro contexto de manera más eficiente. Acompáñenme en este interesante recorrido.

¿Qué necesitas hacer antes de empezar?

Antes de iniciar, asegúrate de tener una aplicación React funcionando. Si vienes de la clase anterior, ya deberías tener un setup preliminar que incluyó la creación de un contexto de notificación y un Provider para envolver la aplicación.

1. Limpiar la aplicación: Comienza eliminando los estilos predeterminados de app.css y cualquier otro contenido innecesario en App.js.
2. Preparar el contexto: Importa el NotificationProvider desde tu archivo de contexto.

import { NotificationProvider } from './context/notificationContext';

És como colocar una plantilla donde puedes encajar los distintos componentes que vas a crear.

¿Cómo agregar componentes de notificación y botón?

Empecemos construyendo los componentes claves para nuestro sistema de notificaciones: el componente de notificación y el botón de confirmación de transacciones.

1. Crear componentes: Crea una carpeta components dentro de src, y dentro de ella archivos Notification.tsx y NotificationButton.tsx.

// Notification.tsx
import React from 'react';

const Notification = () => {
  return (
    <aside>
      <p>Mensaje de notificación aquí</p>
    </aside>
  );
};

export default Notification;

// NotificationButton.tsx
import React from 'react';

const NotificationButton = () => {
  return (
    <button>
      Confirmar Transacción
    </button>
  );
};

export default NotificationButton;

¿Cómo crear un Custom Hook para manejar el contexto?

Para una mejor organización y reutilización, crearemos un custom hook para acceder al contexto de notificación:

1. Crear un Custom Hook: En la carpeta src, crea una carpeta hooks, y dentro, un archivo useNotification.ts.

// useNotification.ts
import { useContext } from 'react';
import { NotificationContext } from '../context/notificationContext';

const useNotification = () => {
  const context = useContext(NotificationContext);
  if (context === undefined) {
    throw new Error('useNotification must be used within a NotificationProvider');
  }
  return context;
};

export default useNotification;

Esto te dará una forma limpia y directa de acceder al contexto, centralizando toda la lógica relacionada.

¿Qué sucede al integrar todo?

Con el contexto y los hooks listos, es momento de unir todos los componentes dentro de la aplicación:

1. Configurar App.js: Envuélvelo con NotificationProvider y utiliza los componentes:

import React from 'react';
import { NotificationProvider } from './context/notificationContext';
import Notification from './components/Notification';
import NotificationButton from './components/NotificationButton';

function App() {
  return (
    <NotificationProvider>
      <h1>Transacción casi lista</h1>
      <Notification />
      <NotificationButton />
    </NotificationProvider>
  );
}

export default App;

Con estas configuraciones, nuestra aplicación debería estar lista para mostrar notificaciones en respuesta a interacciones del usuario. Cada clic en el botón de "Confirmar Transacción" debería disparar una notificación visible a través del estado global del context.

¡Cuéntame tus impresiones y experimentos!

Tu aventura en React apenas comienza. Experimenta añadiendo más características o adaptando este esquema a otros escenarios dentro de tu app. ¿Qué otros usos podrías imaginar para el React Context junto con el custom hook? Algunas ideas incluyen:

• Gestión de temas visuales (light/dark mode)
• Autenticación de usuarios
• Manejo de configuraciones de usuario (preferencias de idioma, alertas, entre otros)

¡Estoy deseando escuchar tus propuestas! Comparte tus avances para inspirar a otros.