DEV Community

Cover image for React Hot Toast
Vijay Kumar
Vijay Kumar

Posted on

1

React Hot Toast

In this blog we will learn a beautiful way to create notifications in your app

Simply we use alert statement during creating any web app for notification, that is OK but here is a more beautiful library with the help of which we can create attractive notifications

React Hot Toast

This library is very simple to use .

How to use React Hot Toast:
Installation:
Run the following command to install react-hot-toast in your project:

npm install react-hot-toast
Enter fullscreen mode Exit fullscreen mode

Basic Setup:
First, import Toaster and toast from the library in your React component:



import { Toaster, toast } from 'react-hot-toast';

function App() {
  const notify = () => toast('This is a toast notification!');

  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <Toaster />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Customizing Toast:
You can customize the toast notification by passing options like type, position, duration, etc.



const notifySuccess = () => toast.success('Success message!', { duration: 4000 });
const notifyError = () => toast.error('Error occurred!', { position: 'bottom-center' });
Enter fullscreen mode Exit fullscreen mode

Toast Types:
react-hot-toast supports different types of toast messages like success, error, and loading.



toast.success('Operation successful!');
toast.error('Something went wrong!');
toast.loading('Please wait...');
Enter fullscreen mode Exit fullscreen mode

Custom Styles:
You can pass custom styles or use classNames to style your toasts:



toast('Custom style toast', {
  style: {
    border: '1px solid #713200',
    padding: '16px',
    color: '#713200',
  },
});
Enter fullscreen mode Exit fullscreen mode

It’s a great tool for adding feedback messages in your React applications quickly and easily!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay