Semantic-ui-react: Toast/Notification Component

[shravan2x]

Are there currently any plans for a toast/notification component?

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[levithomason]

It seems those efforts in SUI core have died. See https://github.com/Semantic-Org/Semantic-UI/issues/1430.

That said, I would support such a component here in the React integration. I've often imagined reusing the Message component for this.

[levithomason]

We'd essentially just write the React component for handling the management of toasts. The UI bits would be composed of other existing components.

[layershifter]

I've made some code a time ago, however it's not ready to use.

[brianespinosa]

For what it's worth, this is what I am currently using to manage these in my own projects: https://github.com/pburtchaell/react-notification

The styles are pretty minimal/simple. And you could probably simplify the styles further and render in some regular SUIR components inside as content instead if you are looking for something fast @shravan2x.

[levithomason]

We're also using other toast libs where I am. I'm thinking we have what we need here in SUIR between Transition and Messages or Segments to make something useful.

[cdaringe]

@layershifter, your prototype code was lookin pretty good!

[ferrao]

I have just implement a simple toast component, please have a look and feel free to provide feedback:

https://github.com/academia-de-codigo/react-semantic-toasts

[macakraca]

@ferrao nice work. Just one thing. It would be better if animation parameter is added to props of SemanticToastContainer instead of it being a function of position, so that other animations can be used beside fly.

semantic-toast-container.jsx:

const animations = {
    ['top-right']: 'fly left',
    ['top-center']: 'fly down',
    ['top-left']: 'fly right',
    ['bottom-right']: 'fly left',
    ['bottom-center']: 'fly up',
    ['bottom-left']: 'fly right'
};

render() {
        const { position } = this.props;
        const animation = animations[position];

[ferrao]

Thanks @macakraca, I agree and have just released a new version where animation is an optional prop of SemanticToastContainer which defaults to be a function of position if not provided.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[michaelmarziani]

Fomantic-UI has added a Toast component in FUI 2.6. Looks pretty good to me: https://fomantic-ui.com/modules/toast.html. I ended up using React-Toastify, but would love to switch back into an SUI/FUI style Toast component.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!