react-toastbox

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

API

props

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

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(mainly App.js or main.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 your children. 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);