Cómo crear un componente de notificación personalizado en React

Hay varios paquetes de terceros disponibles en React que pueden ayudarlo a crear un componente de notificación. Sin embargo, si solo desea un componente de notificación simple, es posible que desee crear uno propio para evitar agregar dependencias innecesarias a su aplicación.

Configuración del proyecto

Vas a use Vite para configurar la aplicación React. Vite es una herramienta de compilación que le permite montar rápidamente un proyecto de React.

Para comenzar, use el administrador de paquetes de hilo para crear un nuevo proyecto de Vite ejecutando el siguiente comando.

hilo crear vite

El comando le pedirá que ingrese un nombre de proyecto. Ingrese el nombre del proyecto y presione Entrar. A continuación, le pedirá que seleccione un marco. Elegir reaccionar y presione Entrar. Finalmente, te pedirá que selecciones una variante, elige JavaScript y luego presione Entrar.

Estas son las configuraciones que usará este tutorial:

Después de que Vite cree el proyecto, navegue hasta la carpeta del proyecto y ábralo con un editor de código.

A continuación, puede iniciar el servidor de desarrollo ejecutando el siguiente comando.

desarrollador de hilo

Esto abrirá su nueva aplicación React en su navegador predeterminado en http://localhost: 5173/.

Diseño del componente de notificación

Para crear un componente de notificación flexible, debe poder manejar diferentes tipos de notificaciones con diferentes títulos, descripciones y estilos. Por ejemplo, debe generar una notificación de advertencia, éxito y error.

Aquí hay diferentes variaciones que el componente de notificación debería poder representar.

Puede lograr esto pasando props al componente que especifica el tipo de notificación para representar, el título y el texto de descripción. Al usar estos accesorios, puede personalizar el componente y reutilizarlo en toda su aplicación con un esfuerzo mínimo. Si necesita un repaso de los accesorios, aquí hay un artículo que explica cómo usar accesorios en React.

Creación del componente de notificación

En el origen carpeta, cree un nuevo archivo llamado Notificación.jsx y agregue el siguiente código.

exportarpor defectofunciónNotificación({tipo, título, descripción}) {
devolver (


 {/* Contenido de la notificación */}
 </div>
 )
}

Este código crea un componente funcional llamado Notificación con tres accesorios: tipo, título, y descripción. Utilizará estos accesorios para personalizar el estilo y el contenido de la notificación.

Desde el diseño, el componente tiene un par de iconos, a saber, información y un icono de cruz. Puede descargar iconos de uso gratuito o use un componente de icono de un paquete como reaccionar-iconos. Este tutorial usará reaccionar-iconos así que instálelo ejecutando el siguiente comando.

hilo agregar iconos de reacción

A continuación, importe los iconos en la parte superior de la Notificación componente.

importar { RxCross2, RxInfoCircleed } de"reaccionar-iconos/rx"

Ahora, puede modificar el componente para usar los iconos, el título y los valores de descripción prop para crear el contenido de la notificación.

exportarpor defectofunciónNotificación({tipo, título, descripción}) {
devolver (







{título}</div>
{descripción}</div>
 </div>
 </div>

 </div>
 )
}

El siguiente paso es diseñarlo según el tipo pasado.

Un enfoque que puede tomar es definir clases de CSS para cada tipo de notificación que desee mostrar. A continuación, puede aplicar condicionalmente la clase adecuada en función del tipo que se pasa.

Para comenzar, cree un nuevo archivo llamado notificación.css e importarlo en Notificación.jsx agregando el siguiente código en la parte superior.

importar "./notificación.css"

luego en notificación.css defina los estilos base para el componente de notificación:

.notificación {
mostrar: doblar;
dirección de flexión: fila;
alinear elementos: arranque flexible;
relleno: 8píxeles;
}
.notificación__izquierda {
mostrar: doblar;
dirección de flexión: fila;
relleno: 0píxeles;
brecha: 8píxeles;
margen derecho: 24píxeles;
}
.notificación__contenido {
mostrar: doblar;
dirección de flexión: columna;
alinear elementos: arranque flexible;
relleno: 0píxeles;
}
.notificación__título {
Familia tipográfica: "Enterrar";
Estilo de fuente: normal;
peso de fuente: 500;
tamaño de fuente: 14píxeles;
}
.notificación__descripción {
Familia tipográfica: "Enterrar";
Estilo de fuente: normal;
peso de fuente: 400;
tamaño de fuente: 12píxeles;
relleno: 0;
}

Luego puede definir los estilos para los diferentes tipos de notificación agregando el siguiente código en el archivo CSS.

.notificación__éxito {
fondo: #f6fef9;
borde: 1píxelessólido#2f9461;
borde-radio: 8píxeles;
}
.notificación__error {
fondo: #fffbfa;
borde: 1píxelessólido#cd3636;
borde-radio: 8píxeles;
}
.notificación__advertencia {
fondo: #fffcf5;
borde: 1píxelessólido#c8811a;
borde-radio: 8píxeles;
}

El código anterior le da estilo al contenedor de notificaciones según el tipo pasado.

Para personalizar el título, utilice los siguientes estilos.

.notificación__título__éxito {
color: #2f9461;
}
.notificación__título__advertencia {
color: #c8811a;
}
.notificación__título__error {
color: #cd3636;
}

Para el texto de descripción personalizado, use estos estilos.

.notificación__descripción__éxito {
color: #53b483;
}
.notificación__descripción__advertencia {
color: #e9a23b;
}
.notificación__descripción__error {
color: #f34141;
}

Y para los íconos, use las siguientes clases.

.notification_icon_error {
color: #cd3636;
}
.notificación__icon__éxito {
color: #2f9461;
}
.notificación__icon__advertencia {
color: #c8811a;
}

Entonces, en el Notificación componente, puede aplicar condicionalmente la clase adecuada en función de la tipo apoyo, así:

exportarpor defectofunciónNotificación({tipo, título, descripción}) {
devolver (
`notificación notificación__${tipo}`}>
`notificación__izquierda`}>
`notificación__icon__${tipo}`}/>
"notificación__contenido">
`notificación__título notificación__título__${tipo}`}>{título}</div>
`notificación__descripción notificación__descripción__${tipo}`}>{descripción}</div>
 </div>
 </div>
`notificación__icon__${tipo}`}/>
 </div>
 )
}

En este componente, está configurando dinámicamente la clase según el tipo, como notificación__éxito o notificación__error.

Para ver esto en acción, importe el componente Notificación en Aplicación.jsx y usarlo de la siguiente manera:

importar Notificación de'./Notificación'
funciónaplicación() {
devolver (
 <>
 tipo ="éxito"
 titulo="Tarea terminada"
 descripción="Tu tarea ha sido completada con éxito."
 />
 </>
 )
}
exportarpor defecto aplicación

Ahora, puede pasar un tipo diferente al Notificación componente y presentar una notificación adecuada que coincida con el mensaje.

Esto es esencial para una buena experiencia de usuario porque los usuarios han llegado a asociar diferentes colores y estilos con diferentes escenarios, y es importante usar esas asociaciones de manera consistente. Por ejemplo, sería confuso informar a un usuario que cargó correctamente una foto en un cuadro de notificación rojo. Podrían pensar que la carga falló, incluso si fue exitosa.

Adición de interactividad al componente de notificación

Aprendió cómo puede usar accesorios para crear un componente de notificación personalizable. Para llevarlo aún más lejos, puede agregar transiciones a este componente para hacerlo más atractivo. Por ejemplo, puede usar animaciones CSS para deslizar el componente de notificación a la pantalla y deslizarlo hacia afuera después de que haya transcurrido una cierta duración.