expose the `dismiss` toast handler in useToaster hook

[cezarneaga]

I couldn't figure out if using the useToaster i could have a custom Notifications component that allows Toasts to be closed manually.

So i added the dismiss to the handlers object. This way, as detailed in the mdx file now, you could have a button in the Toast component that dismisses it.

This brings it to parity with the alternative of using Toaster.

If there is a way and i didn't find it, please close this PR.

Cheers, Cezar

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-hot-toast	✅ Ready (Inspect)	Visit Preview	Dec 12, 2022 at 2:05PM (UTC)

[cezarneaga]

@timolins any feedback on this?

[timolins]

Hi! Any reason you didn't use toast.dismiss(toast.id) directly for this?

[cezarneaga]

it isn't available on the hook i have this:

export const Notifications = () => {
  const { toasts, handlers } = useToaster({
    duration: 3000,
  });
  const { startPause, endPause } = handlers;
  return (
    <div
      onMouseEnter={startPause}
      onMouseLeave={endPause}
      className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-30">
      <Transition
        show={true}
        className="flex w-full flex-col items-center space-y-4 sm:items-end"
        as={'div'}
        enter="transform ease-out duration-300 transition"
        enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        enterTo="translate-y-0 opacity-100 sm:translate-x-0"
        leave="transition ease-in duration-100"
        leaveFrom="opacity-100"
        leaveTo="opacity-0">
        {toasts
          .filter((toast) => toast.visible)
          .map((toast) => {
            return (
              <Notification
                key={toast.id}
                {...toast}
              /> /*once opened PR is accepted i will pass dismiss here from handlers*/
            );
          })}
      </Transition>
    </div>
  );
};

the toast on which i iterate in the map does not have the dismiss C

[timolins]

I see! toast.dismiss is available globally (just like all other toast.* functions). This can be a bit confusing, as the toast you defined for iterating is not the same as the toast you get from import toast from "react-hot-toast".

I like to call my iterative toasts t instead of toast to avoid this confusion.

[timolins]

Also: You might not need to use useToaster at all, if you just want custom toasts. Have a look at this example with Tailwind + Headless UI, which is using the Renderer API from 2.0: https://codesandbox.io/s/react-hot-toast-tailwindcss-headless-ui-qvjri

[cezarneaga]

got it. thanks. we can close the PR. re: useToaster, i thought it was suggested to use this because the headless is styling free.

[timolins]

Using a custom render function is the new recommended version, though I agree this could be more clear in the docs.

It's also fully headless without any styling, just easier to use. Main reason to still use useToaster is for non-DOM environments like react native.

https://react-hot-toast.com/docs/toaster#using-a-custom-render-function