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 |

Building and running demo on localhost (if cloned from github)

First install dependencies:

npm install

To build the libary component:

npm run prepublish

To run demo app:

npm run start

Dependencies

uuid

Author

arfi720