RW Notifications

Sistema de notificaciones para aplicaciones React. Librería ligera y personalizable para mostrar toast notifications.

📦 Instalación

npm install rw-notifications

🚀 Uso Básico

1. Configurar el Provider

Envuelve tu aplicación con el NotificationProvider:

import { NotificationProvider } from 'rw-notifications';

function App() {
  return (
    <NotificationProvider>
      <div className="App">
        {/* Tu aplicación */}
      </div>
    </NotificationProvider>
  );
}

2. Usar las notificaciones

import { useNotifications } from 'rw-notifications';

function MyComponent() {
  const { success, error, warning, info } = useNotifications();

  const handleSuccess = () => {
    success('¡Operación completada exitosamente!');
  };

  const handleError = () => {
    error('Error al procesar la solicitud');
  };

  return (
    <div>
      <button onClick={handleSuccess}>Mostrar éxito</button>
      <button onClick={handleError}>Mostrar error</button>
    </div>
  );
}

⚙️ Configuración

Configuración del Provider

<NotificationProvider 
  config={{
    duration: 5000,           // Duración en ms (0 = permanente)
    position: 'top-right',    // Posición de las notificaciones
    maxNotifications: 3       // Máximo número de notificaciones
  }}
>
  <App />
</NotificationProvider>

Posiciones disponibles

• top-right (por defecto)
• top-left
• top-center
• bottom-right
• bottom-left
• bottom-center

Configuración por notificación

const { addNotification } = useNotifications();

addNotification('Mensaje personalizado', 'success', {
  duration: 10000,  // Duración específica para esta notificación
});

🎨 Tipos de Notificación

const { success, error, warning, info, addNotification } = useNotifications();

// Métodos directos
success('Operación exitosa');
error('Error ocurrido');
warning('Advertencia importante');
info('Información relevante');

// Método genérico
addNotification('Mensaje', 'success');
addNotification('Mensaje', 'error');
addNotification('Mensaje', 'warning');
addNotification('Mensaje', 'info');

🎯 API Completa

Hook useNotifications

const {
  // Métodos para mostrar notificaciones
  success,              // (message, config?) => id
  error,                // (message, config?) => id
  warning,              // (message, config?) => id
  info,                 // (message, config?) => id
  addNotification,      // (message, type, config?) => id
  
  // Métodos de control
  removeNotification,   // (id) => void
  clearAllNotifications, // () => void
  
  // Estado
  notifications,        // Array de notificaciones activas
  config               // Configuración actual
} = useNotifications();

Configuración

{
  duration: 4000,         // Duración en milisegundos
  position: 'top-right', // Posición en pantalla
  maxNotifications: 5    // Máximo de notificaciones simultáneas
}

🎨 Personalización de Estilos

La librería incluye estilos CSS que puedes personalizar mediante variables CSS:

:root {
  --rw-notification-success-bg: #10b981;
  --rw-notification-error-bg: #ef4444;
  --rw-notification-warning-bg: #f59e0b;
  --rw-notification-info-bg: #3b82f6;
  --rw-notification-border-radius: 8px;
  --rw-notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* ... más variables disponibles */
}

📱 Responsive

Las notificaciones son completamente responsive y se adaptan automáticamente a dispositivos móviles.

🔧 Desarrollo

# Instalar dependencias
npm install

# Construir la librería
npm run build

# Preparar para publicación
npm run prepublishOnly

📝 Licencia

MIT

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature
3. Commit tus cambios
4. Push a la rama
5. Abre un Pull Request

📞 Soporte

Si tienes problemas o preguntas, abre un issue en el repositorio de GitHub.

RW Notifications - Parte del ecosistema RW para desarrollo web.