react-bootstrap-toast
v0.1.1
Published
An easy peasy to use react toast out of the box without extra rendering of component provider, it is using react-bootstrap toast component
Downloads
20
Maintainers
Readme
react-bootstrap-toast
An easy peasy to use react toast out of the box without extra rendering of component provider, it is using react-bootstrap toast component
installation
npm i react-bootstrap-toast
or
yarn add react-bootstrap-toast
import to your project
import toast from 'react-bootstrap-toast'
import the css
import 'react-bootstrap-toast/dist/css/style.css'
Props
key (optional): any {it makes the toaster controllable}
header (required): string | reactnode | jsx {the header of the react-bootstrap toast}
body (required): string | reactnode | jsx {the body of the react-bootstrap toast}
className (optional): string {you can add class for to toaster}
classEnter (optional): string {you can customize your own class animation enter}
classExit (optional): string {you can customize your own class animation exit}
bg (optional): 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' {the variant of the toaster}
placement (optional): 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' {the position of the toaster}
duration (optional): number {the duration that stay the toaster when put 0 the toaster will stay forever}
delay (optional): number {the duration/timing of the animation}
dismissible (optional): boolean {when true it will show a close button}
onMount (optional): function {to determine if the toaster is mounted}
onUnmount (optional): function {to determine if the toaster is unmounted}
onDismissed (optional): function {to determine if the toaster is close by clicking dismissed button}
Usage
const handleClick = () => {
toast({
header: 'Success',
body: 'Show me toast'
})
}
TIP
The unmounting time is 600 milliseconds so if you are about to customize closing animation it must be within that time range to show the whole animation