Search code examples
reactjsidiomsblueprintjs

Idiomatic React for Blueprintjs Toast component

The Blueprint UI library provides a Toaster component that displays a notice for a user's action. From the documentation, it's used by first calling

const MyToaster = Toaster.create({options}), followed by

MyToaster.show({message: 'some message'}).

I'm having trouble fitting the show method into React's lifecycle - how do I create a reusable toaster component that will display different messages on different button clicks? If it helps, I am using MobX as a data store.

Solution

  • The Toaster is a funny one in this regard because it doesn't care about your React lifecycle. It's meant to be used imperatively to fire off toasts immediately in response to events.

    Simply call toaster.show() in the relevant event handler (whether it's a DOM click or a Redux action).

    See how we do it in the example itself: toastExample.tsx