react-toasts icon indicating copy to clipboard operation
react-toasts copied to clipboard

HTMLElement support??

Open mrhut10 opened this issue 3 years ago • 5 comments

I've tried numerous times to ToastStore.error() and send it a HtmlElement as per the typescript types you've defined and it always ends up crashing react.

I can provide further details, but hoping you can provide examples of using HtmlElements in your documentation?

mrhut10 avatar Jan 04 '21 03:01 mrhut10

Never mind, i worked out that it does work but its been typed incorrectly as far as typescript goes. The Problem is that it isn't a HTMLElement as per its been typed prob better to be typed as a React.ReactNode

I will try to remember to come back and make a PR to fix this for you, but anyone with the same problem can do the following to bypass typescripts check until a PR to fix the types exists.

example

const userErrorReport = (
  <div>
    Error Importing File:
    <ul>{csvImportErrors.map(error => <li>{error.message}</li>)}</ul>
  </div>
);

//@ts-ignore
ToastsStore.error(userErrorReport);

mrhut10 avatar Jan 04 '21 03:01 mrhut10

Hello !

Yeah you are right, the typing has been badly defined, I had a bad understanding of react nodes typing at this moment.

I will push a fix later today.

Vashnak avatar Jan 04 '21 07:01 Vashnak

dont stress not urgent :)

and I think i'm 90% on a PR which isn't 100% ready yet.

  • fixes the type problem mentioned above
  • changes to a React functional component from class and uses a hook eventsWithTTL to manage the expiry of events
  • by taking advantage of pure tsc for build step reduces the tree of dependencies from 421ish to I think 21 dependencies.

I suspect it's already working, but I've only done it all with typescript type checking, I will set up a demo project to test it imports into another project as expected. as stated not quite ready but your welcome to have a look this is a link to the diff https://github.com/Vashnak/react-toasts/compare/master...mrhut10:rewrite

mrhut10 avatar Jan 04 '21 17:01 mrhut10

oh just seen you've got a v4 branch as well, what where you hoping to achieve in your v4 version?

mrhut10 avatar Jan 05 '21 05:01 mrhut10

Hello mrhut, sorry yesterday I have been quite busy.

The goal of the v4 package is to support server side rendering by using the new React portal and by exporting the css externally. Moreover, I also wanted to remove the Observable pattern and use the Context api, thus, switch to functional components. Finally, Adding some basic options was also in my scope like being able to close toast, display a duration bar, or some little improvement like this.

Then I started to work on another project and ... you know what happened :) I will try to finish this

Vashnak avatar Jan 05 '21 08:01 Vashnak