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

Live Demo

Screenshots

!Toaster

API

$3







































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

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')

$3

`js
import ToastBox from "react-toastbox";
.
.
.


`

$3

`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 /
.
.
.
timerExpires={5000}
position="top-right"
pauseOnHover={true}
/>


`

- 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 (


);
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
``