Show your notifications more stylish

Hello fellow developers,

I’m excited to share my inaugural post on Medium with all of you. As someone deeply engrossed in the realms of React and React Native development, I’m thrilled to embark on this journey. My aim is to introduce you to the libraries that have won my heart through their seamless capabilities and provide you with a plethora of illustrative examples.

In the landscape of user-centric interfaces, we often orchestrate a symphony of actions, necessitating prompt and informative updates for users. And here’s where I’d like to spotlight an immensely valuable tool in your arsenal: React-hot-toast 😄.

While some of you might already be familiar with this gem, a little extra praise never hurts, right? So, let’s dive in and explore the reasons why this package has become an integral part of my workflow, and why I believe it could enrich yours too.

Stay tuned for the upcoming articles where we’ll unravel the potential of React-hot-toast together. Until then, happy coding! 🚀🔥

Let’s download our package
npm install react-hot-toast

Let’s import our package too
import { toast } from “react-hot-toast”;

In order for our notifications to appear on the screen, we need to go to our parent file.

import {Toaster} from “react-hot-toast”

We will customize this part later.

Now it’s time to send notifications :)

Let’s write a function now and inform our users. First, let’s notify for successful transactions.

As evident from the showcased illustration, once the user engages with the designated button, our system swiftly springs into action, orchestrating a gratifying response. The outcome? An instant, artfully crafted notification that warmly informs the user of their triumphant completion of a transaction.

This elegant maneuver is seamlessly executed through the adept integration of the React-hot-toast package. The result is an enhancement of user engagement, as the user is promptly apprised of their successful transaction in a manner that exudes finesse and finesse.

Witness the seamless sequence:

1. The user initiates action by interacting with the button.
2. In the background, our system deftly handles the mechanics of notification deployment.
3. The culmination: an exquisite notification emerges on the screen, effectively conveying the achievement of a successful transaction.
4. Incorporating the React-hot-toast package into our workflow enriches the user experience by creating a harmonious blend of functionality and aesthetic appeal. Thus, with every button press, we celebrate the art of communication and user satisfaction. 🚀🔥

Undoubtedly, as you’ve observed, our ability to communicate with users has been amplified through the delivery of success notifications. The good news is, we can replicate this effectiveness for error and loading scenarios as well. The versatile React-hot-toast package equips us to gracefully handle a spectrum of user interactions.

Let’s explore how:

1. Error Notifications:
2. Just as we celebrated success, we can offer solace in times of trouble. When a transaction falters, the React-hot-toast package lets us swiftly dispatch an error notification to inform the user. This elegant gesture demonstrates our commitment to transparency and empathy.
3. Loading Notifications:
4. Amidst moments of anticipation, waiting becomes more bearable when met with information. The package empowers us to deploy loading notifications, reassuring users that their action is being processed. This small but significant touch instills a sense of confidence and patience in the user.

The process remains harmonious:

1. For errors, when an undesired outcome surfaces, a notification conveys the situation with clarity, fostering an environment of understanding.
2. During loading sequences, users are accompanied by an informative notification, transforming moments of uncertainty into instances of expectancy.

Incorporating error and loading notifications alongside the success notifications exemplifies our dedication to delivering a comprehensive and considerate user experience. By harnessing the potential of the React-hot-toast package, we navigate these diverse scenarios with poise, ensuring our users remain informed and engaged at every turn. 🚀

This is error message and you will learn loading message now

And let’s see the results:

This is loading type

This is error type.

Now we will learn promise structure and customization in notification type.

Now in row promise structure;

Now let’s make a call to an API and get notifications on how that call ended up.

Let’s try to get data from a simple API:

Then after let’s call it by pressing the button,
But when we implement the calling process, let’s apply the promise structure to it and follow all possible processes.
In this part, how will we implement the promise structure?

Let’s use the promise construct by calling the toast function.

Let’s call the function we want to call in the first parameter then after
Let’s set the news of 3 possible situations. These are success, error, and loading messages.

The message we will get when there is an error in the data extraction process

The message we will receive when we are successful in data extraction

As you can see, when we click the button for the first time, we send a request to the API, while the loading message returns, and then we get the relevant message depending on whether the situation is successful or not.

Now let’s customize the notification view a little bit.

We can choose how long the notification can stay on the screen.

You can add one more parameter and set the duration. For example, if we want to say let it stay on the screen for 6 seconds:

We can also add emojis to our notifications.

You can also set the background color, text color and borders of your notifications styles.

You can also decide in which part of the screen your notifications can appear specifically.
You can specify where you can exit by giving the position information.

However, as we mentioned at the beginning of our article, you can set where your notifications can appear without being specific.

You can solve this situation by giving the position information to the Toaster component that we have wrapped in the top file.

As you can see in the image, we can set which corner of our screen your notifications can appear in, with the position information that we have not specified and that we have determined in the top file, while the notification that we have specifically assigned appears in its specified place.

Thank you for reading my entire post. I hope I explained it correctly and you enjoyed this article. Since it is my first post, I started with the introduction of a simple and beautiful library. I hope we can get into even more difficult and specific topics together. Good Improvements!