react-hot-toast

/ 1329 Views
🔥
Try it out on react-hot-toast.com
 

react-hot-toast is a lightweight React notification library with beautiful animations by default.

There are a lot of snackbar, toast and notification libraries out there. None of them quite did what I wanted. They are either not animated, hard to style, or unnecessarily big. I ended up writing my own implementation for PS Tunnel, which is now open source with this library.

 
notion image
 

This react-toastify alternative has a couple of advantages:

  • Beautiful by default
  • No CSS imports needed
  • Has`toast.promise()`
  • Almost half the size
  • Improved pause behavior
  • Easier to style
  • Headless mode
 

Basic Example

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

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};
 

You can check out it's source GitHub.

Timo Lins
Developer + Designer from 🇦🇹
@timolins

Continue reading

View all →
© 2023 Timo Lins · Source