In this article I want to tell you how we can add to an application made with React a warning system like the one that Gmail implements to notify the different actions we do on emails:
For this we will use the React API Context and hooks, which will allow us to implement this feature in very few steps and in a simple way.
I think it is a very interesting exercise to practice with these two React features, so I hope you find it interesting. At the end of the article you can find a link to the project’s CodeSandbox in case you want to see what I tell you in this article in more detail.
Let’s go there!
Creating the ToastContext
The first thing we will do is create our
ToastContext inside the
Let’s see its content first and then we will explain the most relevant parts:
- In line 8 we will use the hook
useStateto store the active toasts in our application.
- Line 10 is where the magic happens (🧙♂️) thanks to the hook
useEffect. Every time the value of the variable toasts is modified by means of the
setToastsfunction of the hook
useState, this effect will be executed, which will set a counter (
setTimeout) so that after 3 seconds it removes the first toast from the list.
- In line 20 we define the
addToastfunction that will be the value that we will store later in the context (line 28). This function is memorized by means of the hook
useCallbackso that we do not recreate it every time the context changes and thus optimize the times that the components included in the context are “rendered”.
- Finally in line 28 we return the
childrenproperty wrapped by the
ToastContext.Providerto which we will add the block in charge of showing the active toasts.
Curiosities. If you realize we are using the
setToast function in its functional form, that is, to
setToast we do not pass the value we want to set but a function that receives the current value of the state as an argument and returns the modified value. This allows us to avoid the problem of closing the
toast variable and obtaining strange results.
I leave you a video where I talk more carefully about this type of problem:
Creating the hook useToastContext
Now that we have our context defined, we will create a custom hook that allows us to use it wherever we need it. Its code is very simple:
Basically we use the React hook
useContext to access the
ToastContext context and get its value, which is, remember, the
addToast function that allows us to add toasts to our application.
Adding toasts to the app
With all this beach bar set up, all you have to do is wrap the components you want with the
ToastContextProvider component so that they can access the
addToast function and thus add toasts when they need it.
I will do this in the App.js component of the project:
Which as you see renders the
Foo component which will use the hook
useToastContext that we created in the previous step to add the toasts when you need it:
And with this we would already have our own implementation of the Gmail toasts while we have reviewed the 4 react hooks:
useEffectto remove hooks after 3 seconds.
useCallbackto memorize the addAlert function.
useContextto access the
ToastContextcontext from our components.
useStateto store the toasts in our context.
I wanted to share this mini project with you because I think it is very very interesting to review the 4 of the 5 React hooks while we implement very interesting functionality for our application through the React Context API.
If you want to see the full implementation you can access the following Code Sandbox:
Do you want to read more articles like this?
If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇