A minimal react toast box inspired by reddit's toast message design and react-toastify.
Using npm:
npm install react-toastbox
| name | type | default | description |
|---|---|---|---|
| timerExpires | Number | 6000(in 'ms') | 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 |
positionClasses = [
"top-right",
"top-left",
"top-center",
"bottom-right",
"bottom-left",
"bottom-center"
];
paints = ["success", "warning", "danger"];In order to use toast box, you need to define component <ToastBox/> 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')
import ToastBox from "react-toastbox";
.
.
.
<ToastBox timerExpires={5000} position="top-right" pauseOnHover={true} intent="success"/>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');
}- Use
<ToastBox />once in your app which listens to events such as success,error,etc... So in your root component(mainlyApp.jsormain.js), register this component with suitable props acc. to your needs
import React from "react";
import ToastBox from "react-toastbox";
/* Your root app logic here */
.
.
.
<ToastBox
timerExpires={5000}
position="top-right"
pauseOnHover={true}
/>
- Then you can call any methods such as
success,error,etc... from yourchildren. The<ToastBox />will listen to event and propagate changes.
import React from "react";
import { toast } from "react-toastbox";
function Child() {
return (
<div className="App">
<button
onClick={() => {
/* Then when you want to show toast, call method and pass argument as text to display*/
toast.success("Toast it up");
}}
>
Show me toast
</button>
</div>
);
}
export default Child;In Nutshell,
import React from "react";
import ReactDOM from "react-dom";
import ToastBox, { toast } from "react-toastbox";
import "./styles.css";
function App() {
return (
<div className="App">
{/* First define toastbox component which will listen to events*/}
<ToastBox
timerExpires={5000}
position="top-right"
pauseOnHover={true}
intent="success"
/>
<button
onClick={() => {
/* Then when you want to show toast, call method and pass argument as text to display*/
toast.success("Toast it up");
}}
>
Show me toast
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent