react-one-toast

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 |