allow closeButton to be a function

[giocodes]

Does anyone else finds allowing closeButton to receive a function? like so:

 <ToastContainer closeButton={({ closeToast }) => (
    <i
      className="material-icons"
      onClick={closeToast}
    >
    delete
    </i>
  )} />

[fkhadra]

Hey @giocodes,

Did you know that you can provide your own CloseButton ? Is that what you are looking for ? Here is a useful link.

[giocodes]

Thanks for the quick response @fkhadra! 😃

Actually, the snippet I posted comes from tweaking the documentation example a little bit.

What I'm pointing out is that the closeButton prop from ToastContianer only seem to accept a JSX component and not an arrow function. Here's a codesandbox reproducing the scenario: https://codesandbox.io/s/k390op1wm7

[giocodes]

After exploring the repo a little bit I think the reason for this limitation is here: https://github.com/fkhadra/react-toastify/blob/dba0318462d10f42d454cd030efc36e6ca217fe5/src/components/ToastContainer.js#L186

By using isValidElement we pretty much filter out functional components, as explained here.

I found a workaround, on that same codesanbox replace:

<ToastContainer
          closeButton={React.createElement(({ YouCanPassAnyProps, closeToast }) => (
            <i className="material-icons" onClick={closeToast}>
              foo
            </i>
          ))}
        />

Which brings back the original question, would it be interesting to support functional components for closeButton? Wondering if anyone else out there would find it useful.

[fkhadra]

Hey @giocodes,

Actually, the snippet I posted comes from tweaking the documentation example a little bit.

I'm planning to update the documentation in a near future, thanks for the feedback.

I think that the support for the closeButton as functional component can be added without too much issue. Now is it useful ? I think it's a matter of preference.

[giocodes]

I'll keep an eye on the thread and if it gets enough votes I'll be happy to help implement it. Thanks @fkhadra