# @kano/kbc-toast

> Toast manager.

Latest version **2.0.61** (published 2023-02-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install @kano/kbc-toast
pnpm add @kano/kbc-toast
yarn add @kano/kbc-toast
bun add @kano/kbc-toast
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.61 |
| Published | 2023-02-17 |
| First published | 2020-10-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 54.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kano Computing |
| Maintainers | petarsimonovic, aetheern, kimonsatan, sophioski, hediho, ellenw3lsh, melissakano, camuskano, jacobmorgan99, alexfiennes, kanocomputing, rpazdera, hicksatkano, holographicleah, tomkano, alexb-kano, jamie_old_plantain |

## Links

- npm: https://www.npmjs.com/package/@kano/kbc-toast
- Repository: https://github.com/KanoComputing/kano-boilerplate-components
- Homepage: https://github.com/KanoComputing/kano-boilerplate-components#readme
- Issues: https://github.com/KanoComputing/kano-boilerplate-components/issues
- npm.io page: https://npm.io/package/@kano/kbc-toast

## Dependencies (10)

- [@types/react](https://npm.io/package/@types/react.md) ^16.14.2
- [utility-types](https://npm.io/package/utility-types.md) ^3.10.0
- [@kano/kbc-intl](https://npm.io/package/@kano/kbc-intl.md) ^2.0.13
- [@kano/kbc-icons](https://npm.io/package/@kano/kbc-icons.md) ^2.2.24
- [@kano/kbc-utils](https://npm.io/package/@kano/kbc-utils.md) ^2.2.4
- [@kano/kbc-button](https://npm.io/package/@kano/kbc-button.md) ^3.0.48
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.10
- [@kano/kbc-telemetry](https://npm.io/package/@kano/kbc-telemetry.md) ^5.0.14
- [@kano/kbc-countdowns](https://npm.io/package/@kano/kbc-countdowns.md) ^1.0.40
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

## Recent versions

- 2.0.61 (latest) — 2023-02-17
- 2.0.60 — 2023-02-14
- 2.0.59 — 2023-01-30
- 2.0.58 — 2023-01-27
- 2.0.57 — 2023-01-26
- 2.0.56 — 2023-01-10
- 2.0.55 — 2022-12-05
- 2.0.54 — 2021-11-26
- 2.0.53 — 2021-11-26
- 2.0.52 — 2021-11-25
- 2.0.51 — 2021-11-25
- 2.0.50 — 2021-11-08
- 2.0.49 — 2021-10-05
- 2.0.48 — 2021-10-01
- 2.0.47 — 2021-09-30
- … 71 more at https://npm.io/package/@kano/kbc-toast/versions

## README

# kbc-toast

A manager and a set of toast configurations.

## Setup

This package provides a context with a global `toastManager` that you can use to trigger toasts.
To set it up, add the following provider:

```tsx
import { ToastManagerProvider } from '@kano/kbc-toast';

ReactDOM.render(
    <ToastManagerProvider config={{}} >
        {/* A component that will trigger a toast. */}
        <Component prop="Hello" />
    </ToastManagerProvider>
);
```

## How to trigger a toast

You can trigger a toast like so

```tsx
import { withToastManager, IToastManagerAPI } from '@kano/kbc-toast';

interface ComponentProps extends IToastManagerAPI {
    prop: string;
}

const Component = withToastManager(({ prop, toastManager }: ComponentProps) => {
    const handleClick = () => {
        toastManager.queueToast(
            'notice',
            'consent-needed', /* Toast id */
            {
                icon: 'Info',
                title: 'Can\'t do this',
                message: 'You need permission to click this button'
            }
        );
    };

    return <button className="component" onClick={handleClick}>{prop}</button>;
});
```

The first parameter selects which toast component to use (in this case `notice`). The second
parameter is custom toast id that you can use to refer to the toast later. The last parameter
will be passed as props to the toast component.

`toastManager.current` has the currently displayed toast.

`toastManager.current.id` has the id that you provided as a second parameter.

You can dismiss it by calling `current.dismiss()`. The toast manager will show the next toast in
the queue. You can also cancel the entire queue by calling `current.cancel()`.

## Toast types

Here are the toast types currently available. To add a new one, create a new file in the `toasts/` directory.

### Notice

A notice with a customisable icon, title and message.

![](https://user-images.githubusercontent.com/169328/97555041-85e16d00-19cf-11eb-8b66-5e475f0a7d74.png)

**Example:**

```ts
toastManager.queueToast(
    'notice',
    'consent-needed',
    {
        icon: 'Info',
        title: 'Can\'t do this',
        message: 'You need permission to click this button'
    }
);
```

### Cookie Consent

A cookie consent with Allow, Deny and close dismiss buttons.

![](https://user-images.githubusercontent.com/169328/97478385-c77b0500-1948-11eb-83e0-da4f93b49f1d.png)

**Example:**

```ts
toastManager.queueToast(
    'cookie-consent',
    'rich-teas',
    {
        onAllow() {
            console.log('COOL');
        },
        onDeny() {
            console.log('NOT COOL');
        },
    }
);
```

---
_Source: https://npm.io/package/@kano/kbc-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._