react-hot-toast

/ 612 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 โ†’
ยฉ 2021 Timo Lins ยท Source