Search for a command to run...
Awesome pop-ups (toasts) with just a few lines of code
I'm a full stack developer based in Australia. I write articles about Node.js, React, JavaScript & Web Development to make your learning journey easier 😀
No comments yet. Be the first to comment.
Introduction Website performance is an important aspect of web development. It consists of mainly two things: The speed of your website How usable is your website for visitors? Importance of website performance Website performance is very importa...
There are plenty of native web APIs that have a variety of uses. Here are 5 useful APIs that I use quite often in my web development projects. Clipboard API The clipboard API is a simple method to copy text to a user's clipboard. This can be used in ...
Hey All 👋 In this article, we'll be covering the Fetch API in JavaScript how you can use it to make HTTP requests. What is the Fetch API? The fetch() method provides a simple way to make HTTP requests in JavaScript. It is natively in the browser, me...
Hey All 👋 In this article, we'll be covering 4 mistakes commonly made by people while learning to code that will seriously impact their coding journey. #1 - Copying and Pasting The first mistake I'll talk about is copying and pasting. We've all don...
Introduction There are plenty of units in CSS. From px to vh, there is an abundance of units all with their distinctive use cases. Considering the amount of options, its perfectly reasonably to be confused as to which unit you should use and where. T...
👋 Hey All,
In this article, I'm going to show you how to create really simple and cool toasts using the react-toastify package.
Lets get right into it!
Firstly, lets clarify what exactly is a 'toast':
A toast is a little pop-up that can positioned anywhere on the screen that shows a text message to the user. For example, toasts can be used for error messages, success messages or even notifications.
A toast may look like this:
react-toastify is a cool package I came across recently that lets you easily implements customizable toasts into your react applications. With just two lines of code, you can get a working, responsive toast that can be customized.
After reading this article, you can check out their full documentation here to see everything you can build with react-toastify.
To install react-toastify, simply run:
npm install --save react-toastify
or with yarn:
yarn add react-toastify
To create your first toast, import the ToastContainer component and toast function:
import { ToastContainer, toast } from "react-toastify"
You also need to import their CSS file:
Regular Version
import 'react-toastify/dist/ReactToastify.css';
Minified version
import 'react-toastify/dist/ReactToastify.min.css';
Finally, you can place the <ToastContainer /> component anywhere in your JSX and call the toast('Message to be shown') function to show the toast.
For example:
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
const handleClick = () => {
toast("This Is A Toast!");
}
return (
<div>
<button onClick={handleClick}>Show Toast</button>
<ToastContainer />
</div>
);
}
Pretty cool right? What makes this package even better is that you can customize the toast by passing certain optional props to the ToastContainer component.
Some options include:
position: which controls where the toast is positioned. Possible values include: top-left, top-right, top-center, bottom-left, bottom-right, and bottom-center.
autoClose: which controls how many milliseconds until the toast automatically closes. E.g autoClose={5000} for it to last 5 seconds.
closesOnClick: which controls whether the toast will close when its clicked on. It's value is a boolean of either true or false.
theme: which controls the theme of the toast. This can be either light, dark or colored.
More options in react-toastify's documentation: docs
Additionally, there are 5 different types of toasts you can use including: info, success, warning, error and default. These just change the color of the toast as well as the icon displayed.
Different types in action:
Info
toast.info("Wow so easy !")
Success
toast.success("Wow so easy !")
Warning
toast.warn("Wow so easy !")
Error
toast.error("Wow so easy !")
Default
toast("Wow so easy !")
Note: Changing the
themeoption will change the appearance from these images
In This article, you have learned how to implements toasts in your react applications with the react-toastify library. This can be used in a wide range of scenarios such as displaying error messages and presenting warnings to a user. Recently, I used this package in a cool social network project for the Netlify X Hashnode hackathon: check it out here if interested.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake Yeboah
Twitter: Blake Yeboah
You can also show your support by buying me a coffee 😃
