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

1import toast from 'react-bootstrap-toast'

import the css

1import '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

1const handleClick = () => {
2  toast({
3    header: 'Success',
4    body: 'Show me toast'
5  })
6}

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