Skip to content

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

Notifications You must be signed in to change notification settings

meetzaveri/react-toastbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-toastbox

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

Installation

NPM version

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"/>
  1. 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

Toaster

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published