React Notifications Without Dependencies

React Notifications Without Dependencies

Let’s build a good looking notification system for React that has no dependencies and doesn’t need a state manager. There is a time (hopefully early on in the project) were the dev team must ditch the console.logs and inconsistent error labels and define a unified way to show notifications to users.

There is a time (hopefully early on in the project) were the dev team must ditch the console.logs and inconsistent error labels and define a unified way to show notifications to users.

Let’s build a hyper lightweight notification system that has no dependencies other than the standard react libraries and doesn’t need a state manager. Using a state manager will definitely improve the features we can add to the system, but let’s save that for a future post.

A functional demo can be found on Github: **[https://github.com/agustincastro/react-notifications**](https://github.com/agustincastro/react-notifications)


As the previous image shows I’ll use the popup’esque style of notifications sometimes called Snackbars. Everything about the style I presented can be easily changed, I just aim to present the approach.

And what will that approach be?

  1. We will create a Snackbar component that will receive the message type(success, info, error, warning), the autohide timer, and the title and subtitle.
  2. A hook html tag with id=”snackbar-fixed-container” is placed in the main .html file, below our react “root” tag.
  3. Helper functions to display different kinds of messages are exported in a utility file. Those functions will add the Snackbar to the DOM in the html hook we defined in step 2.
  4. We call those utility functions to display the snackbars from whatever component we fancy…. neat right?

Enough, show me the code

Let’s begin adding our hook tab in the _index.html _of our public files.

We can create the Snackbar component, create a _SnackBar.js _file in your components folder of your react project and add the following content.

This component will look horrible without styles, let’s create a css file for the component or add them directly if you use styled components. The images and fonts used can be found in the sample Github project.

react coding web-development javascript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How To Write Better Code As A Web Developer - React

Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers

Learning How to Code React - Front End Developer Coding Journey Update

Here is an update to my coding journey! I'm currently learning React now. Eventually, I'll learn some backend languages, but first I want to learn enough React so I can start building some projects.

Modern JavaScript for React Developers

Modern JavaScript for React Developers. Learn the basics of JavaScript for React. We'll start building the markup and rendering logic of our Flash Card application first in JavaScript so that we can lay down the foundations for the upcoming React training.

How to Become A React JavaScript Developer 🚀

Today Qazi & Sonny will be showing you How To Become a React JavaScript Developer 🚀👨‍💻