react-toast

React Toast

Minimal toast notifications for React.

Get started

$3

Install with yarn

``sh
yarn add react-toast
`

Install with NPM

`sh
npm install react-toast
`

`jsx
import { ToastContainer, toast } from 'react-toast'

const App = () => {
const wave = () => toast('Hi there 👋')

return (



)
}
`

$3

Demo on CodeSandbox.

$3

#### 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 |
| deplay (ms) | number | delay for toast | 6000 |

#### Toast

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

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

or

`js
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:

`js
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