react-toastbox

A minimal react toast box inspired by reddit's toast message design and react-toastify.

Installation

Using npm:

npm install react-toastbox

How to use

1. Import main Toastbox from lib and you need to inject it once in your main bootstrapped file.

main.js

import ToastBox from "react-toastbox";
.
.
.
<ToastBox timerExpires={5000} position="top-right" pauseOnHover={true} intent="success"/>

2. To use it in action, import toast method to call your toast message on screen.

child.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');
}

Codesandbox demo

Live Demo

Screenshots

API

<ToastBox />

Properties

name	required	type	default	description
timerExpires	no	Number	6000(in 'ms')	Expiration time till toast message should be visible
pauseOnHover	no	Boolean	true	On hovering toast, it's timer should be paused
position	no	String	'top-right'	Position for toast to be displayed.
intent	no	String	'primary'	Theme for toast message

toast

Methods

toast is object containing methods for success and error(More to come soon).

• toast.error('Error') - Showing error toast message
• toast.success('Success') - Showing success 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

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