## Get started
### Quick start
**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 (
)
}
```
### Demo
[Demo](https://codesandbox.io/s/byqvk) 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:
```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](https://github.com/moharnadreza/react-toast/blob/develop/LICENSE)
