react-notifications-component, una potente biblioteca de notificaciones de React

En este artículo, analizaremos la nueva versión de react-notifications-component (v2.0.6). Es un componente de React que te proporciona un sistema de notificaciones con todas las funciones que te permitirá ahorrar el tiempo y el esfuerzo que supone crear uno tú mismo.

Comencemos por instalarlo, junto con animate.css:

npm install --save react-notifications-component animate.css

Usamos animate.css para animar cómo entran y salen las notificaciones, pero puedes usar cualquier biblioteca de animación basada en clases que prefieras.

Uso básico

Si bien esta biblioteca está repleta de funciones, puede comenzar a usarla rápidamente porque los pasos de instalación y configuración son bastante mínimos:

Aplicación.js

import React from 'react';import ReactNotifications from 'react-notifications-component';import Homepage from './Homepage';function App() {  return (    div      ReactNotifications /      Homepage/    /div  );};

En esencia, utiliza la API de contexto, por lo que solo deberá incluirla una vez en su aplicación y podrá usarla en cualquier lugar. Probablemente desee colocarla ReactNotifications /cerca del nivel superior de su aplicación.

Para comenzar a mostrar notificaciones, importe el storemódulo a cualquiera de sus componentes y utilice store.addNotification()el método:

Página de inicio.js

import React from 'react';import { store } from 'react-notifications-component';import 'react-notifications-component/dist/theme.css';import 'animate.css';function Homepage() {  return (          My Website      button        onClick={() = {          store.addNotification({            title: 'Dropbox',            message: 'Files were synced',            type: 'default',                         // 'default', 'success', 'info', 'warning'            container: 'bottom-left',                // where to position the notifications            animationIn: ["animated", "fadeIn"],     // animate.css classes that's applied            animationOut: ["animated", "fadeOut"],   // animate.css classes that's applied            dismiss: {              duration: 3000             }          })        }}              Add notification      /button    /  )}

¡Prueba a hacer clic en el botón!

Nota : Es posible que veas una notificación de ancho completo si estás viendo esto en un dispositivo pequeño.

Se incluyen varios tipos de notificaciones: éxito, advertencia, información y predeterminada.

Personalización de notificaciones

Si necesitas tus propios estilos CSS para tus notificaciones, ¡puedes usar cualquier elemento React válido como notificación!

Página de inicio.js

function Homepage() {  return (          My Website      button        onClick={() = {          store.addNotification({            content: MyNotification,            container: 'bottom-right',            animationIn: ["animated", "fadeIn"],              animationOut: ["animated", "fadeOut"],            dismiss: {              duration: 3000            }          })        }}              Add notification      /button    /  )}

MiNotificación.js

function MyNotification() {  return (    div style={{      display: 'flex',      backgroundColor: '#0f2f26',      borderRadius: 5,    }}      AlligatorAvatar/      div        h4Alligator.io/h4        pHas joined the chat/p      /div    /div  )}

Nota : Se pueden encontrar detalles de configuración adicionales en la documentación.

Terminando

Si necesitas un sistema de notificaciones para tu aplicación React, ¡definitivamente deberías probar react-notifications-component! Hay muchas funciones que no se han cubierto, como compatibilidad con dispositivos móviles y de escritorio, opciones de animación, gestos táctiles y diseño responsivo.