Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

carbon-components-react/ToastNotification: Add `onClose` prop

See original GitHub issue

What package(s) are you using?

carbon-components

Detailed description

Will you please add an onClose: () => void prop to the ToastNotification react component?

It should replace the inner setState so that it’s possible to implement the animation behaviour defined in your design guidelines without ugly hacks that hijack the close button handler.

I’ve solved this for now by removing the close button & hooking our handler to onClick, but our UX designer is not amused and would like to keep the close button instead.

Issue Analytics

State:
Created 3 years ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

kubijocommented, Mar 3, 2021

@emyarod @kubijo it sounds like you worked out a solution. If you think it’s worth it to do out of the box animations for toast notifications in the future, please let me know. I’d love to help on that effort.

Considered all I’ve said above I’m fine with the way things are now (once the onClose gets released that is)

1reaction

kubijocommented, Feb 26, 2021

Thank you 👍

Top Results From Across the Web

Inline notifications - Carbon Design System

Toasts are non-modal, time-based window elements used to display short messages; they usually appear at the top of the screen and disappear after...

ToastNotification - Carbon Components Svelte

ToastNotification is a controlled component. Prevent the default close behavior using the e.preventDefault() method in the dispatched on:close event.

The 5 Best React Notification Component for Your App - Morioh

2. Toasted Notes. A super simple but flexible implementation of toast style notifications for React, initially based on the excellent implementation found in ......

Use a custom close button or remove it | React-Toastify

#Remove it. Sometimes you don't want to display a close button. It can be removed globally or per toast. Pass false to closeButton...

Menu - scrollable submenu with parent item ... - Carbon - Sage

A scrollable submenu can be added using the ScrollableBlock component. ... Menu items can be given a maximum width using the maxWidth prop....