Build your own React toast notifications from scratch

No libraries used!

In the world of modern applications, you get everything on the internet readymade.

But in some cases, you get more than what you need and that may slow you down. With our frontend development, when using third-party libraries, you add more unused code and make your user experience a bit worse by increasing time for the first meaningful paint.

In the process of creating components with minimal size. I am building a toast notification library from the ground-up with React.

However, if you would prefer to skip ahead, I turned all of the code used in this article into an npm package that you can find here: https://www.npmjs.com/package/react-tiny-toast.

What are the toast notifications?
Toast notifications are simple non-modal pop-ups for feedback on an operation that is currently active, visible and interactive.

To build notifications we need a toast manager which helps in maintaining the list of active toast notifications. And in turn, we pass the active toast notifications onto our react components to display it. To pass data between toast manager and react components. We have a subscribe method in our toast manager. This accepts a callback method from our react components, and the subscribe method calls the callback whenever we want to update a toast notification.

our toast manager code.

Here our subscribe method is passed with a callback which is defined in our React Component using which we build toast UI as and when this callback is called with new toast messages. Because of which the application which is using this needs a React Component(ToastContainer which we will add in next steps) to render our toast messages.

Here comes ToastContainer which passes the callback to subscribe method, and the callback gets called every time a toast message is added or removed. Using the callback our UI component gets to know about any addition or removal of any toast messages.

On component mount, we subscribe to toastManager to notify our react-component about any new message additions.

Using the callback function in conjunction with dispatch function we update our existing Toast notification UI. here dispatch is returned by useReducer to update our state(refer here to learn more about useReducer).

Definition of our state using reducer function. using dispatch function returned by useReducer we update our present component which in turn updates the UI.

Based on the actions passed to dispatch function from our callback, we update our state using reducer passed as the first argument while defining our state using useReducer. Refer to the code below:

On updating the state here, our react component re-renders with updated toast messages.

Next comes the part of rendering our component with toast messages. Our component already has toast notification messages. Before doing this we need to make sure our toast notifications don’t interfere with the application UI. To do this we create our own document element, here we mount our toast notification.

On component mount, we create a document element and append it to body.

We use React Portals to render our toast elements onto your UI. React portals help us in showing toast notifications irrespective of our component where we show our toast being allowed to overflow or has a low z-index and hidden from the user.

And we group our toast notifications based on a position to assign a position using our CSS stylings. Pass in React Component to render your own styles.

Rendering part of our toast message list.

A sample image of toast notification using react-tiny-toast from its demo storybook with code that can be used directly in your application. Link to the demo application here[http://playground.ashr81.now.sh/]. You can just copy the code and paste in the code into your application.

Image from demo site with ready code that can be used on your application

Bonus:

To avoid multiple toasts for the same actions, pass in the uniqueCode property with a unique string or number.

With the package size too small. it embeds into your application without any performance degradation.

Package size on Bundlephobia

You can find the demo of the react-tiny-toast here with the interactive setting of options:

You can use the package by adding it to your project.

Find directions of the usage here:

Demo Link: https://playground.ashr81.now.sh

react-tiny-toast

ashr81/react-tiny-toast

Objective:

1. To keep away the bloatware and add only the required options to keep bundle size very small.
2. you can add your own styles for the toast notifications.