bmcmahen / toasted-notes Goto Github PK

With react-spring in version 9 the top-left, top and top-right is not showing ok, it is a problem with the translate because when is on top show transform: translateY(-100%); and never change

Firstly, a really great package. Thanks for the hard work 👍

It would be great if there was an option to stack the Toasts like this:
https://vercel.com/design/toast

Hey @bmcmahen noticed there hasn't been an update to this project since 2019 and the peer dependencies are pinned to [email protected].

Is this project no longer being maintained?

I need to explore the correct way to ensure that these elements are accessible to screen-readers. I suspect we will either need to look for elements that can be focused, and focused them automatically, or delegate the focus code to the user w/ a helper function of some sort.

We are getting the following error when calling the toast function..

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in ToastManager

We are simply calling the toast function on an axios error.

Using React latest version (16.13.1).

NOTE: I use custom component with what appears to be a 'non-native' size there. I fired them at the same time

It could be reproduced w/any custom sized notification components

Is it possible to display only one instance of toaster?
I have a scenario where I use the toaster to prompt user for input and toaster will only be dismissed by user's action
A user may trigger another toaster but the previous should go away immediately.

Thanks

Courtesy: https://www.tippedjs.com/

Given the current API, jsx in render props or elements won't get access to context. Explore ways to support context while maintaining the current API, and inform users of ways to supply context to their render callback (wrap it with context providers).

Since notify doesn't return the generated id and there is no way of setting an id via incoming props, currently neither closeToast or removeToast can be used.

notify should return the id of the toast created by createToastState so we can reference it.

Would love support for closing a single toast, maybe notify could return an id that could simply be passed to a close function to allow closing the toast outside the toast itself.

Good morning, I'm trying to use the API, but when calling the Toaster with:
toaster.notify(description, {duration: 5000, position: 'bottom-left'});, I get the following:

Then I have tried to use :
const CustomNotification = ({ title }) => { const theme = useTheme(); return <div style={{ color: theme.primary }}>{title}</div>; }; const CustomNotificationWithTheme = withTheme(CustomNotification); toaster.notify(() => <CustomNotificationWithTheme title="I am pretty" />);
But I get errors about useTheme() and withTheme()

Is there something I'm missing?
Thanks for your time

containers shouldn't have any pointer-events, while actual notifications should

If you can support custom insert locations, it will be more flexible. In a two-column layout, I want to have it on each side.

Toast.tsx#L37

I worked with react-spring elsewhere in my project and realized it was on v9.0.0 and all my toasts stopped working with an odd error saying something like cannot destructure property 'reset' from undefined. I knew it had to be react-spring since I just worked with it directly elsewhere and unknowingly upgraded to v9.0.0. So I checked master over here and noticed that the dependency for this project relies on v8.0.0. A downgrade in my project to react-spring v8.0.0 fixed the issue, just noting here for future people.

Would love to know license on this software. Thanks 😊

Sometimes an alert isn't visible, until I hover over the space where it should be. I switched to the latest stable version of react spring 8.0.27 (rather than the 9 beta) and it seems to have gone away.

I like this package, i am just having some strange behaviour when calling toast.notify.

From some components it is firing perfectly, and others the animation does not start and it is stuck above the screen.

The only difference between the components I can note is that one is a top level route, and one is a nested route.

Hello, can you please publish 3.1.0 to npm? thanks

Specifying the type of message doesn't render a different message, but the same white message.

This is because we animate the height attribute.

Possible solutions include using marginTop, marginBottom as animation attributes, or absolutely positioning the element inside.

I'm not hugely concerned with this but my ocd might get the better of me.

If you can support custom animation, it will be more flexible.

Message.tsx#L93