Idiomatic React for Blueprintjs Toast component - reactjs

Question

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.

Answer 1

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

Answer 2

My solution with Redux (and redux-actions)...
Action:
export const setToaster = createAction('SET_TOASTER');
Reducer:
const initialState = {
toaster: {
message: ''
}
};
function reducer(state = initialState, action) {
switch(action.type) {
case 'SET_TOASTER':
return {
...state,
toaster: { ...state.toaster, ...action.payload }
};
};
}
Toaster Component:
// not showing imports here...
class MyToaster extends Component {
constructor(props) {
super(props);
this.state = {
// set default toaster props here like intent, position, etc.
// or pass them in as props from redux state
message: '',
show: false
};
}
componentDidMount() {
this.toaster = Toaster.create(this.state);
}
componentWillReceiveProps(nextProps) {
// if we receive a new message prop
// and the toaster isn't visible then show it
if (nextProps.message && !this.state.show) {
this.setState({ show: true });
}
}
componentDidUpdate() {
if (this.state.show) {
this.showToaster();
}
}
resetToaster = () => {
this.setState({ show: false });
// call redux action to set message to empty
this.props.setToaster({ message: '' });
}
showToaster = () => {
const options = { ...this.state, ...this.props };
if (this.toaster) {
this.resetToaster();
this.toaster.show(options);
}
}
render() {
// this component never renders anything
return null;
}
}
App Component:
Or whatever your root level component is...
const App = (props) =>
<div>
<MyToaster {...props.toaster} setToaster={props.actions.setToaster} />
</div>
Some Other Component:
Where you need to invoke the toaster...
class MyOtherComponent extends Component {
handleSomething = () => {
// We need to show a toaster!
this.props.actions.setToaster({
message: 'Hello World!'
});
}
render() { ... }
}