Blife UI

Importar el provedor

Importa el provedor del toast y envuelve tu aplicacion

import { ToastProvider } from "@blifedesarrollo/blife-ui/toast";
 
const RootLayout = ({ children }) => (
  <html>
    <head>...</head>
    <body>
      <ToastProvider>{children}</ToastProvider>
    </body>
  </html>
);

Usa el hook `useToast` para poder crear un toast

src/doc-demos/ui/toast/basic-demo.tsx

"use client";

import { Button } from "@blifedesarrollo/blife-ui/button";
import { useToast } from "@blifedesarrollo/blife-ui/toast";

export const BasicDemo = () => {
  const { createToast } = useToast();

  const onClick = () => {
    createToast({
      type: "success",
      message: "El correo alex@blife.mx se creo con exito",
      duration: 3000,
    });
  };

  return (
    <Button onClick={onClick} mode="outline" colorPallete="neutral">
      Crear toast
    </Button>
  );
};

Variantes

Utiliza la propiedad type para cambiar el estilo visual del toast.

Mensaje Personalizado

Si necesitas personalizar el renderizado del mensaje en lugar de una simple cadena, puedes hacerlo mandando directamente tu JSX

Configurar duracion global

Si necesitas configurar la duracion que tardan en mostrarse todos loas toast, utiliza la propiedad duration en el provedor

<ToastProvider duration={4000}>{children}</ToastProvider>

Toast

Importar el provedor

Usa el hook useToast para poder crear un toast

Variantes

Mensaje Personalizado

Configurar duracion global

Usa el hook `useToast` para poder crear un toast