Las notificaciones o alertas de brindis son componentes de tipo modal que muestran información, o cualquier mensaje a los usuarios, generalmente a través de botones. Las notificaciones de brindis se usan comúnmente para mostrar:
- Una notificación o un mensaje personalizado.
- Un mensaje de éxito al enviar un formulario.
- Un mensaje de error si falla la solicitud de la API.
Módulo React Hot Toast: El módulo React Hot Toast es una biblioteca liviana y personalizable que agrega hermosas notificaciones a nuestra aplicación React.
Características:
- Es fácil de usar, personalizable y ligero. Pesa menos de 5kb.
- Podemos hacer varios brindis, como brindis de notificación, éxito y error.
- Podemos crear un brindis temático agregando estilos únicos a nuestro brindis.
- Las notificaciones se pueden colocar en las posiciones superior izquierda, superior central, superior derecha, inferior izquierda, inferior central e inferior derecha.
- También son posibles los brindis multilínea y en modo oscuro.
- Es compatible con emojis.
- Podemos usar Promise API.
Enfoque: Crearemos una aplicación React y crearemos brindis usando el paquete react-hot-toast. Jugaremos con varios brindis, los ubicaremos y agregaremos estilos únicos.
Paso 1: Cree un directorio de proyectos, diríjase a la terminal y cree una aplicación de reacción llamada «notificación» usando el siguiente comando:
npx create-react-app notification
Después de crear la aplicación de notificación, cambie a la nueva carpeta «notificación» usando el siguiente comando:
cd notification
Paso 2: después de crear la aplicación React, instale el paquete react-hot-toast con el siguiente comando:
npm install react-hot-toast
Instalación de react-hot-toast
Paso 3: Modifique la estructura de su proyecto. Modificaremos la carpeta y mantendremos los archivos que necesitamos para este proyecto. Agregue un archivo style.css a la carpeta. Asegúrese de que la estructura de su archivo se vea así:
Estructura del proyecto final:
Estructura del Proyecto Final
Paso 4: agregue código a su archivo index.html. Incluya el siguiente código en su archivo index.html, ubicado en la carpeta pública del directorio de su proyecto.
índice.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <title>Toasting Notifications</title> </head> <body> <div id="root"></div> </body> </html>
Paso 5: crear notificaciones de tostado en App.js: en primer lugar, importaremos el componente tostador del paquete react-hot-toast para usarlo en nuestro proyecto.
import toast, { Toaster } from 'react-hot-toast';
Luego agregaremos un archivo CSS personalizado para anular algunos de los estilos predeterminados.
Para crear una notificación de brindis en nuestra aplicación, debemos agregar un componente de tostadora «<Tostadora/>» y luego podemos llamarlo desde cualquier lugar como brindis («mensaje personalizado»).
Disponemos de unos botones, y al pulsarlos podremos crear numerosos brindis. Haremos un brindis de éxito, un brindis de notificación y un brindis de error. Todas las notificaciones se alinean en la parte superior central especificando la posición en el componente tostador. Agregaremos un brindis de varias líneas y estableceremos la duración. Luego, crearemos un brindis temático agregándole un estilo único. Prepararemos una tostada oscura y la colocaremos en la parte inferior central.
Aplicación.js
Javascript
import React from "react";
import toast, { Toaster } from "react-hot-toast";
import "./App.css";
import "./style.css";
const notify = () => toast("Welcome to GeeksforGeeks");
const success = () => toast.success("Successfully registered");
const error = () => toast.error("Oops! An error occurred.");
const bigToast = () =>
toast(
`GeeksforGeeks is a Computer Science Portal for Geeks
.\n\nIt contains well written, well thought and well
explained computer science and programming articles .`,
{
duration: 4000,
}
);
const themedToast = () =>
toast(
"Browse courses or read articles .",
{
style: {
border: "1px solid green",
padding: "16px",
color: "green",
},
}
);
const darkToast = () =>
toast("Hello contribute to gfg!", {
icon: "????",
style: {
borderRadius: "12px",
background: "#333",
color: "#fff",
},
position: "bottom-center",
});
function App() {
return (
<>
<div className="notificationContainer">
<p> Toasting Notifications </p>{" "}
<button onClick={notify}>
Notification Toast
</button>{" "}
<button onClick={success}>
Success Toast
</button>{" "}
<button onClick={error}>
Error Toast
</button>{" "}
<button onClick={bigToast}>
Multiline Toast
</button>{" "}
<button onClick={themedToast}>
Themed Toast
</button>{" "}
<button onClick={darkToast}>
Dark Toast
</button>{" "}
</div>{" "}
<Toaster position="top-center"
reverseOrder={true} />
</>
);
}
export default App;
Paso 6: Apliquemos estilo a nuestra aplicación de notificaciones. Agregue el siguiente código en su archivo style.css.
estilo.css
CSS
.notificationContainer {
margin: auto;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
button {
margin: 1rem;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
padding: 1rem;
}
p {
font-size: 2rem;
color: green;
}
Paso 7: Su archivo index.js debería verse así. El archivo index.js sirve como punto de entrada principal y, dentro de él, el archivo App.js se representa en el ID raíz del DOM.
índice.js
Javascript
Javascriptimport React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Nuestra aplicación de notificaciones está lista.
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:
npm start
Salida: De forma predeterminada, el proyecto React se ejecutará en el puerto 3000. Puede acceder a él en localhost:3000 en su navegador. Así es como se ve nuestra aplicación:
Nuestra aplicación nos permitirá realizar numerosas notificaciones de brindis simplemente pulsando varios botones.
Salida: aplicación de notificación
Referencia: https://react-hot-toast.com/
Publicación traducida automáticamente
Artículo escrito por codesaurav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA