fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Feature Request: Typed Toasts #991

Closed rwilliams3088 closed 5 months ago

rwilliams3088 commented 10 months ago

Do you want to request a feature or report a bug?

Feature request

What is the current behavior?

If you want to invoke one of the toasts methods, like toast.error, the function signature is hard-coded such that if you want to pass the props to a function in order to generate the content, the props are of type ToastContentProps<unknown>. There doesn't appear to be an option to specify the type of the generic argument TData.

While not a serious problem, it is annoying to use less elegant type castings like this:

    toast.error(props => ErrorToastContent(props as ToastContentProps<ErrorPayload>), { 
      data: payload as ErrorPayload 
    });

The signature of ErrorToastContent is as follows:

function ErrorToastContent(props: ToastContentProps<ErrorPayload>): JSX.Element

What is the expected behavior?

I would like to be able to specify the type of TData or have it inferred from the arguments. So either of the following should work:

   toast.error<ErrorPayload>(ErrorToastContent, { data: payload });

Or better yet:

   toast.error(ErrorToastContent, { data: payload });

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I'm currently using React@^17 and Typescript@^4.7.3. The browser is not relevant - this is an issue with how the API is currently written.