fkhadra / react-toastify

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

Reusable toast function with custom component #1005

Closed IzoldaV closed 8 months ago

IzoldaV commented 9 months ago

Do you want to request a feature or report a bug? Hello. My idea is to create a reusable function for notifications that will accept properties for the notification. I am having a problem with types when passing properties, as stated below. The demo example on the site shows a message with static parameters. How can I type or change this function? Thank you in advance.

What is the current behavior?

Argument of type '{ message: string; }' is not assignable to parameter of type 'NotificationProps'.
Property 'toastProps' is missing in type '{ message: string; }' but required in type 'NotificationProps'.ts(2345)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below: That's an example

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? "react": "18.2.0" "react-toastify": "^9.0.8"

fkhadra commented 8 months ago

Hey, you have to make toastProps optional in your interface

Property 'toastProps' is missing in type '{ message: string; }' but required in type 'NotificationProps'.ts(2345)

//before
type NotificationProps = {
  message: string;
  closeToast?: () => void;
  toastProps: ToastProps;
};

// after
type NotificationProps = {
  message: string;
  closeToast?: () => void;
  toastProps?: ToastProps;
};