1.2.6 • Published 4 years ago
react-toastbox v1.2.6
react-toastbox
A minimal react toast box inspired by reddit's toast message design and react-toastify.
Installation
Using npm:
npm install react-toastbox
Codesandbox demo
Screenshots
API
props
Possible values for API
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 <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')
ToastBox
import ToastBox from "react-toastbox";
.
.
.
<ToastBox timerExpires={5000} position="top-right" pauseOnHover={true} intent="success"/>
{ toast }
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
<ToastBox />
once in your app which listens to events such as success,error,etc... So in your root component(mainlyApp.js
ormain.js
), register this component with suitable props acc. to your needs
Parent (App.js)
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.
Child(childToRender.js)
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);
1.2.6
4 years ago
1.2.5
4 years ago
1.2.4
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.9
4 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago