)
}
```
Then use the useToastRack hook in any function component to fire and dismiss toasts
```jsx
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(
)
}
```
### You can also use the default import, which won't update on every render like the useToastRack hook
```jsx
import toast from 'buttoned-toaster';
...
toast.fire({message: "fire anywhere", toastId: "unique_toast"})
...
```
### Include buttons & don't show again
```jsx
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
```
### 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:
```sh
npm install
```
To build the libary component:
```sh
npm run prepublish
```
To run demo app:
```sh
npm run start
```
### Dependencies
[uuid](https://www.npmjs.com/package/uuid)
### Author
[arfi720](https://github.com/aroomforimprovement/)
---
_Source: https://npm.io/package/buttoned-toaster · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._