1.0.1 • Published 5 years ago
react-one-toast v1.0.1
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
forToastContainer