@owaiswiz/react-tiny-toast
v0.2.7
Published
# Installation Install this package by running on your project root directory.
Downloads
16
Maintainers
Readme
Play around with the toast component here. Find readymade code and demo for the message invoker here.
Installation
Install this package by running on your project root directory.
yarn install react-tiny-toast
Usage
Once installed, render this component onto your root component.
import { ToastContainer } from 'react-tiny-toast';
const App = () => {
return (
<div>
<ToastContainer />
</div>
)
}
once above step is done. you can call in the toast from anywhere in your application(Make sure ToastContainer
is in your component tree).
import React, { useEffect } from 'react';
import { toast } from 'react-tiny-toast';
const ChildComponent = () => {
useEffect(() => {
toast.show('You have successfully seen the toast notification.', { timeout: 3000 })
}, [])
}
toast.show
accepts two arguments
string
or a valid react component which renders onto the displayed toast component.object
which accepts different options for the toast notification.
Accepted Options:
{
variant: 'success' | 'danger' | 'warning' | 'default',
position: 'top-center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center',
delay: number, // time in milli seconds
timeout: number, // time in mulli seconds
uniqueCode: string | number // helps in avoiding duplicate toast message when triggered multiple times by user actions.
}