Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to pass props to a custom component in TypeScript #568

Closed
stanleyk opened this issue Feb 15, 2021 · 7 comments
Closed

How to pass props to a custom component in TypeScript #568

stanleyk opened this issue Feb 15, 2021 · 7 comments

Comments

@stanleyk
Copy link

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
Copy link

Rafatcb commented Feb 15, 2021

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
Copy link
Author

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
Copy link
Owner

fkhadra commented Feb 15, 2021

@stanleyk does the following solve your issue ?

Edit toast-content-ts

@stanleyk
Copy link
Author

@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
Copy link
Owner

fkhadra commented Feb 16, 2021

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

@fkhadra fkhadra pinned this issue Apr 20, 2021
@fkhadra fkhadra closed this as completed Apr 20, 2021
@swiser-gus
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants