Buttoned-toaster NPM

buttoned-toaster

In development: Simple react component library for toasts with buttons

Usage

Use ToastRack component somewhere near the top of your app:

import { ToastRack } from 'buttoned-toaster';

const App = () => {
    return(
        <div>
            <AwesomeComponents>
            <ToastRack
                position='top-left'
                duration={5000}>
        </div>
    )
}

Then use the useToastRack hook in any function component to fire and dismiss toasts

import { useToastRack } from 'buttoned-toaster'

const RegularComponent = () => {
    const toast = useToastRack();
    const [lastToastId, setLastToastId] = useState();
    const toastHandler = () => {
        const id = toast.fire({
            message: "I did it!",
            duration: 30000
        });
        setLastToastId(id);
    }

    const dismissToast = () => {
        toast.dismiss(lastToastId);
    }
    return(
        <div>
            <button onClick={toastHandler}>Toast</button>
            <button onClick={dismissToast}>Dismiss</button>
        </div>
    )
}

You can also use the default import, which won't update on every render like the useToastRack hook

import toast from 'buttoned-toaster';

...
    toast.fire({message: "fire anywhere", toastId: "unique_toast"})
...

Include buttons & don't show again

const handler = () => {
    const doThing = (id, dontshow) => {
        ///
        if(id)
            toast.dismiss(id)
    }
    const dontDoThing = (id, dontshow) => {
        ///
        if(id)
            toast.dismiss(id)
    }
    const choiceMade = await toast.dontShow('MY_KEY');

    if(choiceMade){
        choiceMade.choice ? doThing() : dontDoThing()
    }
    toast.warn({
        message: "Are you sure",
        approveFunc:doThing,
        dismissFunc:dontDoThing,
        approveTxt: "Do the thing",
        canHide: true,
        dontShowType: 'MY_KEY'
    })
}

return <button onClick={handler}>Buttoned Toaster</button>

Toast options

key	type	desc	required	default
toastId	string	set this if you want this toast to be exclusive (ie, only one of this toast will exist at a time)	n	auto-generated id
duration	num	in millis (infinite = 1661)	n	3000 if not buttoned, inifinite if buttoned
heading	string	if you want the toast to have a heading	n	none
message	string	text for toast body	n	'Toast'
position	string	import POSITIONS to access possible values	n	top-center
wide	bool	to get a double-wide toast	n	false
approveFunc(id)	function	called when user clicks approve, should take toast id as a parameter, should handle toast.dismiss	required if you want a two-buttoned toast	none
dismissFunc(id)	function	called when user clicks dismiss, should take toast id as a parameter, should handle toast.dismiss	n	dismiss()
approveTxt	string	text for approve button	n	'OK'
dismissTxt	string	text for dismiss button	no	'Cancel'
canHide	bool	true if you want 'don't show again' functionality	n	false
dontShowType	string	will be saved to localStorage, along with user choice, if 'don't show again' is chosen	required if canHide is true	none
captureDontShow	function	optional, if you want to override the default 'don't show again' functionality	n	if 'don't show again' is chosen, saves type and choice in localStorage - developer is responsible for what to do with that info
icon	string	path to assign to img.src of toast icon	n	depending on variant (success, error, warn, none)
moreOptions	array	array of objects representing multiple options, instead of approveFunc only {handler: (function), btnText: 'string', btnType: 'string'}	n	none

Toaster props

prop	type	desc	required	default
position	string	default position for all toasts, will be overridden if an individual toast includes position property	n	top-center
duration	num	default for all toasts, will be overridden if an individual toast includes duration property	n	3000 if not buttoned, inifinite if buttoned