An easy peasy to use react toast out of the box without extra rendering of component provider, it is using react-bootstrap toast component
npm install react-bootstrap-toast
npm i react-bootstrap-toast
or
yarn add react-bootstrap-toast
import to your project
js
import toast from 'react-bootstrap-toast'
`$3
js
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_
js
const handleClick = () => {
toast({
header: 'Success',
body: 'Show me toast'
})
}
``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