How to pass props to a custom component in TypeScript

[stanleyk]

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!

[Rafatcb]

This is more of a workaround than an answer, but I do it like this:

function renderContent(text: string): JSX.Element {
  return <div><p>{text}</p></div>;
}

const content = renderContent('Ooops');
toast(content);

[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.

[fkhadra]

@stanleyk does the following solve your issue ?

[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>
  );
};

[fkhadra]

@stanleyk thanks for testing. I guess this should be added to the documentation.

[swiser-gus]

Just providing another implementation example as I was looking for this but I had to tweak it a bit.

type Props = {
  message: string;
  retryFn: () => void;
};

const Msg = ({ closeToast, toastProps, message, retryFn }: ToastContentProps & Props) => {
  return (
    <div>
      {message} - {toastProps?.position}

      <button onClick={retryFn}>Retry</button>
      <button onClick={closeToast}>Close</button>
    </div>
  );
};

const displayMsg = () => {
    toast((props: ToastContentProps) => <Msg message="My custom message rocks!" retryFn={handleRetryFn} {...props}/>);
    // toast(Msg) would also work
  };

[marc-at-brightnight]

Just providing another implementation example as I was looking for this but I had to tweak it a bit.

That should 100% be added to the documentation, the documentation for the current TS example is impossible to follow for a real-world use case.