Saltar al contenido

Reaccionar tostadas notificaciones tutorialJan, 6thIn este tutorial, vamos a aprender acerca de cómo agregar tostadas …

marzo 13, 2020

 En este tutorial

, vamos a aprender acerca de cómo agregar tostadas notificationsto nuestra reaccionan aplicación utilizando la biblioteca reaccionar-toastify. Instalación

vamos a instalar la biblioteca reaccionar-toastify nuestro reaccionan aplicación.

Ejecutar el siguiente comando en su terminal.

npm i react-toastify

Adición de tostadas notificaciones

Ejemplo

import React from "react";
import { ToastContainer, toast } from "react-toastify";import "react-toastify/dist/ReactToastify.css";
function App() {
function Notify() { toast("You clicked the button"); }
return (

);
}

export default App;

en el código anterior, primero se importó un método tostadas, componente del archivo reaccionar-toastify y también ‘ReactToastify.css’ para el estilo predeterminado.

  • tostadas (): El método de la tostada toma el contenido como primer argumento, significa que el contenido que tenemos que ver durante la notificación tostadas (como hemos añadido Ha hecho clic en el botón en el código anterior).
  • ToastContainer: Para hacer la tostada tenemos que añadir un componente ToastContainer en nuestra aplicación.

posición cambiante tostadas

Por tostadas por defecto se muestran en la posición superior derecha de su navegador, podemos cambiar la posición de tostado mediante la adición de un segundo argumento al método de pan tostado.

function Notify() {
toast("You clicked the button",{
/oast is positioned on bottom right position: "bottom-right"
});
}

Estos son los otros valores de posición disponibles.

top-right,
top-center,
top-left
bottom-right,
bottom-center,
bottom-left

Cierre tostadas o desactivar

Por defecto, tostadas será automático cerrado después de 5000 milisegundos (5 segundos), podemos retrasar las tostadas hora de cierre mediante la adición de una propiedad Autoclose al método de pan tostado.

function Notify() {
toast("You clicked the button",{
position: "bottom-right",
/oast will be closed after 10 seconds
autoClose: 10000 });
}

También puede desactivar el cierre del automóvil estableciendo la propiedad Autoclose a falso.

function Notify() {
toast("You clicked the button",{
position: "bottom-right",
autoClose: false });
}

Puede encontrar más información acerca de reaccionar-toastify biblioteca en GitHub.