React custom toast notification component from scratch

Hristo Enev
Dec 7, 2019 · 3 min read

Toast notifications in the web development are small modal like elements, that do not interfere with the user interaction with a website. They usually display information but sometimes might hold some call to action buttons. A common use of toast notifications are to display an error message upon failed API request for example. Or success message upon successful request after submitting a form.

Let me show you a simple way to create a toast notification component with React. We will utilize React’s context and hooks in order to be able to show a toast from anywhere inside our application.

If you want to check the full code example, look into this StackBlitz or check my Github repo.

The first thing we need to do is to create our context. Let’s make a separate file for it.

Toast/context.js

Next — let’s create our toast provider. We will use HOC so that we can wrap our provider around the App component.

Toast/withToastProvider.js

In our HOC we are defining an array of toasts (since we want to have multiple toasts at any given time) and the toast API, which for now will be just add and remove functionality. The API will be exposed through the context.

We will add the toasts with a portal so that we can attach them to the body. We can customize this even further and provide an option so that we can specify where to attach the toasts to, but we won’t do it in this tutorial.

Now let’s see how to define our Toast component.

Toast/Toast.js

Beside all the fancy styling we can do here, we will introduce an auto dismiss functionality. Our toasts will dismiss themselves in 5 seconds or 5000ms.

We’ll need to use useRef here because setTimeout will not hold state very well and will mess up our toasts array. useRef holds the same ref object on every render so we won’t have nasty bugs in our code. You can read more about the relationship between setTimeout and useRef here.

Next step — expose the toast API through a custom hook.

Toast/useToast.js

Lastly we just need to export our public modules through index.js.

Toast/index.js

Now we have all the essentials to wrap our main App component and to start creating toasts.

//...
import { withToastProvider } from './Toast';
//...
function App() {
//...
export default withToastProvider(App);

And now you can add a toast notification from any component.

//...
import { useToast } from './Toast';
//...
function Child() {
const toast = useToast();
//...

fetch('/api/url')
.then(success)
.catch(err => toast.add(err.message));
//...

Check the full code example at StackBlitz or check my Github repo. For more advanced application example check my React Auth w/ Firebase Github repository.

Conclusion

Feel free to comment and share your ideas and suggestions! Thanks for reading 🙏

JavaScript in Plain English

Learn the web's most important programming language.

Hristo Enev

Written by

Front end web developer

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade