streamline ToastOption types with code logic

Problem

If I type the following code

toast.custom(„hello“,{type:“error“})

It does hand over the type to the custom handler. So I can access the type in my own component (which is very usefull to e.g. set the color for each type).

So this works well (except the TS error):

import { toast } from 'react-hot-toast/headless';

  ...

  return (
    <div className="fixed flex flex-col gap-3 top-12 right-0 z-50 p-4" onMouseEnter={startPause} onMouseLeave={endPause}>
      {toasts
        .filter((toast) => toast.visible)
        .map((toast) => (
          <div key={toast.id} {...toast.ariaProps}  >
            <p>type: {toast.type}</p> //<- I can see the type but typescript says: "type" is not defined
          </div>
        ))}
    </div>
  )
}

The reason for that is that the code is handing over everything: https://github.com/timolins/react-hot-toast/blob/1713dd3598ee5b746ccc9c66750d6f53394e58f1/src/core/toast.ts#L31

But the types does not allow handing over everything: https://github.com/timolins/react-hot-toast/blob/1713dd3598ee5b746ccc9c66750d6f53394e58f1/src/core/types.ts#L57-L69

Solution

We should add the type to the allowed ToastOptions.

timolins / react-hot-toast

streamline ToastOption types with code logic #306

Problem

Solution