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'constApp=()=>{constwave=()=>toast('Hi there 👋')return(<div><buttononClick={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 | bottom-left | bottom-center | bottom-right	position of toast	bottom-left
delay (ms)	number	delay for toast	6000

Toast

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

constsuccess=()=>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:

constcustomToast=()=>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