Expiration time till toast message should be visible
pauseOnHover
Boolean
true
On hovering toast, it's timer should be paused
position
String
'top-right'
Position for toast to be displayed.
intent
String
'primary'
Theme for toast message
## Possible values for API
```js
positionClasses = [
"top-right",
"top-left",
"top-center",
"bottom-right",
"bottom-left",
"bottom-center"
];
paints = ["success", "warning", "danger"];
```
## Quick API tour
In order to use toast box, you need to define component `` in root file which will listen for events(success,danger,etc), for example i.e. `App.js`.
Then when you want to show `error` or `success` message, just use `{toast}` method available from package. `toast.success('Yayy')`
### ToastBox
```js
import ToastBox from "react-toastbox";
.
.
.
```
### { toast }
```js
import { toast } from "react-toastbox";
.
.
.
handleClick = () => {
/* Then when you want to show toast, call method and pass argument as text to display*/
toast.success('Toast it up');
}
```
## Usage
- Use `` once in your app which listens to events such as success,error,etc...
So in your root component(mainly `App.js` or `main.js`), register this component with suitable props acc. to your needs
#### Parent (App.js)
```js
import React from "react";
import ToastBox from "react-toastbox";
/* Your root app logic here */
.
.
.
```
- Then you can call any methods such as `success`,`error`,etc... from your `children`. The `` will listen to event and propagate changes.
#### Child(childToRender.js)
```js
import React from "react";
import { toast } from "react-toastbox";
function Child() {
return (
);
}
export default Child;
```
In Nutshell,
```js
import React from "react";
import ReactDOM from "react-dom";
import ToastBox, { toast } from "react-toastbox";
import "./styles.css";
function App() {
return (
{/* First define toastbox component which will listen to events*/}
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
---
_Source: https://npm.io/package/react-toastbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._