retoast

stateless react toaster made easy.

installation

npm i retoast

or

yarn add retoast

import to your project

import retoast from 'retoast'

import the css

import 'retoast/dist/css/main.css'

Props

key (optional): any {it makes the toaster controllable}

body (required): string | reactnode {the body of the toaster}

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}

variant (optional): 'primary' | 'success' | 'danger' | 'warning' | 'info' {the variant of the toaster}

placement (optional): 'top' | 'top-left' | 'top-right' | '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

retoast({
    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