Example of Custom Promise Toast? about react-hot-toast HOT 4 CLOSED

Yes, this is possible. Let me explain how toast.promise works internally, so it's easier to understand how we are going to style it.

Compared to other toast calls (success, error etc.), toast.promise doesn't have its own toast type.
It's a helper function that creates a loading toast and updates it based on the provided promise.

You can read the internals yourself here: https://github.com/timolins/react-hot-toast/blob/main/src/core/toast.ts#L62-L91

In order to style toast.promise(), we need to style all toast types that are being dispatched by it. Meaning loading, success & error.

For small tweaks, I'd suggest using the styling API.
For a full customisation, you can write your own renderer.

Here is an example with custom notifications built with react-hot-toast + goober (styled-components like). This method works equally well with other styling methods.

CodeSandbox: https://codesandbox.io/s/react-hot-toast-custom-toasts-with-styled-components-i4xj6?file=/src/App.js

from react-hot-toast.

Anyway if it helps someone. I did something like this. I am doing abstraction on top of the toast functionality and it works nice.

import React from 'react';
import toast from 'react-hot-toast';
import { v4 as uuid } from 'uuid';

import type { ToastProps } from './toast';
import { Toast } from './toast';

export const triggerToast = (
  title: string,
  settings?: SettingsType,
) => {
  toast.custom(
    t => (
      <Toast
        title={title}
        isError={settings?.isError}
        isLoading={settings?.isLoading}
        action={settings?.action}
        ariaRole={settings?.ariaRole}
        onClose={() => toast.dismiss(t.id)}
        isVisible={t.visible}
      />
    ),
    { id: settings?.id },
  );
};

triggerToast.promise = <T,>(promise: Promise<T>) => {
  const id = uuid();

  triggerToast('Loading', { isLoading: true, id });

  promise
    .then(p => {
      triggerToast('success', {
        id,
      });

      return p;
    })
    .catch(() => {
      triggerToast('error', {
        id,
        isError: true,
      });
    });

  return promise;
};

from react-hot-toast.

Also looking for a way to dismiss a Promise Toast. message.promise returns a Promise, not the id like the other toast methods.

I think built in functionality for adding & styling a dismiss button would be ideal ( #7 ) though the need for manual dismissal for promise toasts is still needed.

from react-hot-toast.

This would be awesome to have in documentation if possible. cc @timolins

from react-hot-toast.