Toast

Import

import { Toastr } from "@sparrowengg/twigs-react";

Usage

You can add Toast at top level of your application to configure the options.

function App() {
  return (
    <>
      <Toastr duration={10000} />
      <App />
    </>
  );
}

Trigger toast

Using toast hook you can trigger toast from anywhere in your application.

Open in playground

<Button
  variant="outline"
  onClick={() => {
    toast({
      variant: "default",
      title: "Default message",
      description: "There was a problem with your request.",
    });
  }}
>
  Show Toast
</Button>

Toast With Promise

Using toast.promise you can show toast with promise.

Open in playground

<Button
  variant="outline"
  onClick={() => {
    toast.promise(ResolvePromise(), {
      loading: {
        title: "Creating, please wait...",
        variant: "loading",
      },
      success: (p) => ({
        title: `${p.title}`,
        variant: "success",
        description: `${p.description}`,
      }),
      error: (p) => ({
        title: `Error while creating record: ${p.title}`,
        variant: "error",
      }),
    });
  }}
>
  Success
</Button>

Props

Toastr

Property	Description	Type	Default
duration	how long the toast should be visible in the UI, in milliseconds	number	10000

toast

Property	Description	Type	Default
variant		default success error warning	default
icon	Add an icon on the left side of the toast