How to open a Toast?

[biapar]

I try to open a toast when I press a button, but I don’t understand how.
Is there an example?

[joshblack]

Hi there, @biapar! 👋

Currently, there is no example for rendering/placement of the notifications. We provide the component itself, but it is up to teams to determine the placement. We have some guidelines over on the component page itself that might help: https://www.carbondesignsystem.com/components/notification/usage

Hope this helps!

[Reve]

Since there is no offical example, the only way I made it work so you can show it and re-show it after it was dissmised is to use a state variable "open" that starts initialy with 0 (which can also be interpreted as false) and check for the value in the render() function. To reshow it I use Math.random() to generate a random value for "open" and used the key property of the Notification.

See example:

const [open, setOpen] = useState(0)

handleSuccess = () => setOpen(Math.random())

render (
   {!!open &&
      <ToastNotification
         key={open}
         kind="success"
         title="This is a toast"
         timeout={5000}
      />
   }
)