Popularity
1.4
Growing
Activity
5.9
-
38
3
2

Programming language: TypeScript
License: MIT License
Tags: UI Components     Notification    

react-toast alternatives and similar libraries

Based on the "Notification" category.
Alternatively, view react-toast alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-toast or a related project?

Add another 'Notification' Library

README

React Toast

Minimal toast notifications for React.

Get started

Quick start

Install with yarn

yarn add react-toast

Install with NPM

npm install react-toast
import { ToastContainer, toast } from 'react-toast'

const App = () => {
  const wave = () => toast('Hi there ๐Ÿ‘‹')

  return (
    <div>
      <button onClick={wave}>Say hi!</button>
      <ToastContainer />
    </div>
  )
}

Demo

Demo on CodeSandbox.

Docs

Toast Container

To use react-toast, you need to put ToastContainer in a top-level component in your application. e.g. App.js

It can take some props, here's a list of them:

Props Type Description Default
position top-left \ top-center \ top-right \
deplay (ms) number delay for toast 6000

Toast

There are 4 base toast type available, success, error, info and warn. For instance:

const success = () => toast.success('Message sent successfully!')

or

fetch('someRandomUrl')
  .then(res => res.json())
  .then(res => console.log(res))
  .catch(err => toast.error(err.message))

Custom toast

You can display custom styled toasts, here's an example and a list of options that are available for customization:

const customToast = () =>
  toast('Morning! Have a good day.', {
    backgroundColor: '#8329C5',
    color: '#ffffff',
  })
Property Type Description Default
backgroundColor string background color of toast based on toast type, e.g. success will be green
color string color of text in toast #ffffff

License

MIT


*Note that all licence references and agreements mentioned in the react-toast README section above are relevant to that project's source code only.