Show Toast

It provides a toast function with various icons as well as basic toast.
Data from functions other than default receives only the jsx element as a parameter.

default

toast('default');

Success

toast.success('Success');

Error

toast.error('Error');

Warn

toast.warn('Warn');

Info

toast.info('Info');

Promise

toast.promise receives the status of the promis and displays the loading before resolve, reject, and updates the data of the toast when the promise is fulfilled.

import { toast } from 'react-strawberry-toast';

function ShowPromiseButton() {
  const onClick = () => {
    const promise = new Promise<number>((resolve) => {
      setTimeout(() => resolve(123), 3_000);
    });

    toast.promise(promise, {
      loading: 'loading',
      success: (res) => <div>resolved value: {res}</div>,
      error: 'error',
    });
  };

  return (
    <button type="button" onClick={onClick}>
      show promise
    </button>
  );
}

Promise API reference

Headless Hook Usage

Promise handling is also supported with headless hooks.

import { toast } from 'react-strawberry-toast/dist/headless';

function ShowPromiseButton() {
  const onClick = () => {
    const toastId = toast('loading');

    const promise = new Promise<number>((resolve) => {
      setTimeout(() => resolve(123), 3_000);
    });

    promise.then((res) => {
      toast.replace(toastId, <div>{res}</div>);
    }).catch(() => {
      toast.replace(toastId, 'error');
    });
  };

  return (
    <button type="button" onClick={onClick}>
      show promise
    </button>
  );
}