How to pass props to a custom component in TypeScript

According to the docs I can create my own component and use it like this:

toast(<Msg />)

But when I create the component just like the docs suggest:

const Msg = ({ closeToast, toastProps }) => (
  <div>...</div>
)

I get the (pretty obvious) error:

TS2739: Type ‘{}’ is missing the following properties from type ‘{ closeToast: any; toastProps: any; }’: closeToast, toastProps

I can get it working by using the

toast(Msg)

form, but how do I pass anything (like the actual text I want to show) to the component in such case?

Maybe I am missing something essential here, thanks for any help!

[stanleyk]

@fkhadra Yes, great, thank you!

For future readers (I noticed the CodeSandbox examples disappear after some time): Declaring the component props using the Partial utility type helps:

const Msg = ({ closeToast, toastProps }: Partial<ToastContentProps>) => {
  return (
    <div>
      Lorem ipsum dolor {toastProps?.position}
      <button>Retry</button>
      <button onClick={closeToast}>Close</button>
    </div>
  );
};

[stanleyk]

I thought of such a workaround too. But I want to be able to use the toastProps in my component too, for example to read the toastProps.type and style the component accordingly. I don’t see a way to achieve that in such a workaround though.