react-one-toast

danhuang1202
esm Styles
react-one-toast JS library on GitHub react-one-toast JS library on npm Download react-one-toast JS library

[![NPM version](https://img.shields.io/npm/v/react-one-toast.svg)](https://www.npmjs.com/package/react-one-toast)

Version 1.0.1 License ISC
react-one-toast has no homepage
react-one-toast JS library on GitHub
react-one-toast JS library on npm
Download react-one-toast JS library
Keywords
reacttoastnotification

react-one-toast

NPM version

Easily show notification from buttom to top with React. The main differnet with other libraries is that only one Toast will displayed with multiple notifacations, the later notification will replace the previous one. See demo here

Installation

npm i react-one-toast

Usage

Implement your toast component

// Toast.js
import React from 'react'

function Toast({ message }){
  const { link, text } = action

  return (
    <div className={style.toast}>{message}</div>
  )
}

Show toast when button clicked

// App.js
import React from 'react'
import Toast from './Toast'
import {useToast, ToastContainer } from 'react-one-toast'
import from 'react-one-toast/css/style.css'

function App(){
  const {showToast, props} = useToast()

  return (
    <>
      <button
        onClick={()=>{showToast(<Toast message="success !"/>)}}
      >
        Add to wishlist
      </button>
      <ToastContainer {...props}/>
    </>
  )
}

Modules

  • ToastContainer

    React element for showing toast

    props type required default description
    height number true - Height of ToastContainer
    className string false - Custom class name of ToastContainer
    content ReactNode true - ReactNode of Toast content
    timeout Timeout false - See type definetion bellow
    replaceDuration number false 200 traisition duration in milliseconds for replace taost content
    • Timeout

      props type required default description
      duration number false 500 traisition duration in milliseconds for showing ToastContainer
      appear number false 2000 timeout in milliseconds to hidding ToastContainer
  • useToast

    React hooks to generate props for ToastContainer

    arguments type required default description
    content ReactNode true - toast content
    options object false {} other props exclude content for ToastContainer