react-js-toast

react-js-toast

• Android like snackbar notification.
• Deferent icon and background color for every toast type.
• Stack new toasts on top of each other.

Installation

npm install react-js-toast

Usage

/...
import Toast from 'react-js-toast';

export default function App() {
    let alertMe = null;

    const toast_handle = () => {
        // passing (message, type) params will replace Toast props.
        alertMe.showToast('this is a toast notification', 'success');
    }

    return(
        <>
            <Toast
             ref={(node) => alertMe = node}
             type='info'
             message='my default message'
            />

            /...
            <button onClick={toast_handle}>Show Toast Notification
            </button>
        </>
    )
}

Props

message : [String]

• Toast text message.
• Default Value 'Toast message goes here'

type : ['info' | 'warning' | 'error' | 'success'] [optional]

• Every type has different icon and background color.
• Default Value 'info'

animation : ['fade' | 'slide' | 'none'] [optional]

• Toast animaion style.
• Default Value 'fade'

position : ['top' | 'bottom'] [optional]

• Show toast from the bottom or from the top of the body page.
• Default Value 'bottom'

duration : [Number] [optional]

• The time that take to hide toast in ms.
• Default Value 3000

toastStyle : [Object] [optional]

• Toast container custom style.

textStyle : [Object] [optional]

• Toast text meassage custom style.

iconColor : [String] [optional]

• The default icon color.
• Default Value '#fff'

customIcon : [Function] [optional]

• Provide you own icon, a function that return a jsx element.

stackable : [Boolean] [optional]

• Allow toasts to stack on top of each other, if false new toast will replace the old one.
• Default Value true

rtl : [Boolean] [optional]

• For right to left languages.
• Default Value false

Methods

showToast()

• ShowToast(message?: String, type?: 'info' | 'warning' | 'error' | 'success')
• Note: Passing params will replace given porps values.