# toast-lib-react-kra

> Toast library for React

Latest version **0.0.53** (published 2023-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install toast-lib-react-kra
pnpm add toast-lib-react-kra
yarn add toast-lib-react-kra
bun add toast-lib-react-kra
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.53 |
| Published | 2023-02-06 |
| First published | 2023-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kramax42 |
| Keywords | react, storybook, rollup, toast, library |

## Links

- npm: https://www.npmjs.com/package/toast-lib-react-kra
- npm.io page: https://npm.io/package/toast-lib-react-kra

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.53 (latest) — 2023-02-06
- 0.0.51 — 2023-02-05
- 0.0.5 — 2023-02-05
- 0.0.42 — 2023-02-04
- 0.0.41 — 2023-02-04
- 0.0.4 — 2023-02-04
- 0.0.3 — 2023-01-16
- 0.0.2 — 2023-01-16
- 0.0.1 — 2023-01-11

## README

## Usage example:

```jsx
import {
  createToast,
  ToastsContainer,
  THEME_VARIANTS,
  TOAST_POSITIONS,
  TOAST_VARIANTS,
  ANIMATION_VARIANTS
} from 'toast-lib-react-kra';

  export function Example() {
    const onClickMakeToast = () => {
        createToast({
        message: 'Hello, World!',
        isAutoClose: true,
        duration: 6000,
        theme: THEME_VARIANTS.dark,
        variant: TOAST_VARIANTS.info,
        animation: ANIMATION_VARIANTS.slide,
        position: TOAST_POSITIONS.bottomRight,
        customColorConfig: {
            background: 'dark',
            text: 'white',
            icon: 'white,
            progressBar: 'white',
        },
    });
  };

  return (
    <>
      <button onClick={onClickMakeToast}>
        Create Toast
      </button>
      <ToastsContainer
        position={position}
        indent={indent}
        toastsGap={toastsGap}
      />
    </>
  );
}
```

## List of config values:
- message: string,
- isAutoClose: boolean,
- duration: number,
- indent: number
- toastsGap: number
- theme: THEME_VARIANTS = { dark, colored, light }
- position: TOAST_POSITIONS = { topRight, topLeft, bottomRight, bottomLeft }
- variant: TOAST_VARIANTS = { success, info, danger, warning }
- aniamtion: ANIMATION_VARIANTS = { slide, fade, scale }
- customColorConfig: { background: string, text: string, icon: string, progressBar: string}

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