Flash messages with React/Redux

A flash message seems like it should be one of the simpler things when it comes to coding. In my earlier projects with Ruby on Rails and basic Javascript, it had always been short and sweet. So, when I decided I wanted to add in a little flash message while working with React and Redux, I anticipated the same. Not so! This turned out to be incredibly complex and, honestly, took me a LONG time to figure out. Every tutorial I followed led to a dead end for one reason or another: the person’s setup was wildly different than mine, or I followed every step and it just plain wasn’t working. So, I’m going to do my best to give you my own simple and straightforward explanation that SHOULD work… well, I guess that’s what everyone says. But I promise I will do my best!

We’re going to use react-simple-widgets, from which FlashProvider gives us a (supposedly) easy way to display various flash messages in our application.

First step is to install the package!

yarn add -D react-simple-widgets

You’ll need both FlashProvider and DialogProvider to be ancestors of your app export. So, we first wrap our app component in these two providers.

Now, if you’re anything like me, your render function inside index.js looks like this:

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

So, you’re thinking, “my app component is ALREADY wrapped in a Provider! Does it stay or go? Which one comes first?” The Provider component makes the store available to our app, so we need to keep it. It needs to be at the top-level so that our entire application has access to the store. So, we are going to add the DialogProvider and FlashProvider inside the top-level Provider.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import App from './App';
import store from './store'
import { FlashProvider, DialogProvider } from "react-simple-widgets";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<DialogProvider>
<FlashProvider >
<App />
</FlashProvider>
</DialogProvider>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);

That’s a lot of Providers! But we need them all. Take note that you need to import FlashProvider and DialogProvider from react-simple-widgets, as shown above.

Now, we want our flash message to display at some point; most likely when we hit a button. Navigate to the component that will contain that button.

First step is to import a couple of functions from react and react-simple-widgets:

import { useContext } from "react";
import { FlashProviderContext } from "react-simple-widgets";

Now we’ll create two constants that we’ll use to display the flash message:

const { flashError, flashWarning, flashInfo, flashSuccess } = useContext(FlashProviderContext);
const message = "Yay, a flash message!";

The message constant will contain whatever message YOU want to display. Next is to update our button inside return():

return (
<div>
<button
className="btn btn-success btn-sm"
onClick={handleClick()}>
Click me to see a flash message!
</button>
</div>
)

Note the class name you’ll give your button.

Last but not least, I am going to update that handleClick() function so that the flash message will actually appear!

function handleClick(e) {
flashSuccess("Success", <u>{message}</u>, () => alert("Success flash message"))
}

Awesome! We have a working flash message displaying that message that we set as a constant at the top of the function.

Here’s what our entire component looks like:

import React from 'react'
import { connect } from 'react-redux'
import {createUserBookClub} from "../actions/userBookClubs"
import {addFlashMessage} from "../actions/flash"
import { useContext } from "react";
import { FlashProviderContext } from "react-simple-widgets";
const FlashMessageExample = () => {

const { flashError, flashWarning, flashInfo, flashSuccess } = useContext(FlashProviderContext);
const message = "Yay, a flash message!";
function handleClick(e) {
flashSuccess("Success", <u>{message}</u>, () => alert("Success flash message"))
}
return (
<div>
<button
className="btn btn-success btn-sm"
onClick={handleClick()}>
Click me to see a flash message!
</button>
</div>
)
}

export default FlashMessageExample;

Is it working? How does it look? I have to say, with just a little adjusting, this was the easiest method I found for creating flash messages. Hope you feel the same!