# @blaze-react/table

> Wrap your app in the `ToastProvider`, which provides context for the `Toast` descendants.

Latest version **0.8.0-alpha.112** (published 2025-10-01) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @blaze-react/table
pnpm add @blaze-react/table
yarn add @blaze-react/table
bun add @blaze-react/table
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 0.8.0-alpha.112 |
| Published | 2025-10-01 |
| First published | 2019-06-20 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | byte9 |
| Maintainers | marekb9, mcabrerapf, daoyong, grzegorzi, ishrat, andypail, tanane |

## Links

- npm: https://www.npmjs.com/package/@blaze-react/table
- npm.io page: https://npm.io/package/@blaze-react/table

## Recent versions

- 0.8.0-alpha.112 (latest) — 2025-10-01
- 0.8.0-alpha.117 (alpha) — 2026-03-11
- 0.8.0-alpha.115 — 2026-02-23
- 0.8.0-alpha.114 — 2026-01-08
- 0.8.0-alpha.110 — 2025-09-10
- 0.8.0-alpha.106 — 2025-08-14
- 0.8.0-alpha.103 — 2025-07-07
- 0.8.0-alpha.102 — 2025-07-01
- 0.8.0-alpha.101 — 2025-06-27
- 0.8.0-alpha.98 — 2024-11-27
- 0.8.0-alpha.94 — 2024-11-20
- 0.8.0-alpha.93 — 2024-11-19
- 0.8.0-alpha.86 — 2024-11-05
- 0.8.0-alpha.84 — 2024-10-31
- 0.8.0-alpha.83 — 2024-10-30
- … 124 more at https://npm.io/package/@blaze-react/table/versions

## README

### Use

Wrap your app in the `ToastProvider`, which provides context for the `Toast` descendants.

```jsx
import { ToastProvider, useToasts } from '@blaze-cms/toaster';

const FormWithToasts = () => {
  const { addToast } = useToasts();

  const onSubmit = async (value) => {
    const { error } = await dataPersistenceLayer(value);

    if (error) {
      addToast(error.message, { appearance: 'error' });
    } else {
      addToast('Saved Successfully', { appearance: 'success' });
    }
  };

  return <form onSubmit={onSubmit}>...</form>;
};

const App = () => (
  <ToastProvider>
    <FormWithToasts />
  </ToastProvider>
);
```

## ToastProvider Props

For brevity:

- `PlacementType` is equal to `'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'`.
- `TransitionState` is equal to `'entering' | 'entered' | 'exiting' | 'exited'`.

| Property                               | Description                                                                              |
| -------------------------------------- | ---------------------------------------------------------------------------------------- |
| autoDismissTimeout `number`            | Default `5000`. The time until a toast will be dismissed automatically, in milliseconds. |
| children `Node`                        | Required. Your app content.                                                              |
| components `{ ToastContainer, Toast }` | Replace the underlying components.                                                       |
| placement `PlacementType`              | Default `top-right`. Where, in relation to the viewport, to place the toasts.            |
| transitionDuration `number`            | Default `220`. The duration of the CSS transition on the `Toast` component.              |

## Toast Props

| Property                           | Description                                                                                                                          |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| appearance                         | Required. One of `success`, `error`, `warning`, `info`                                                                               |
| children                           | Required. The content of the toast notification.                                                                                     |
| autoDismiss `boolean`              | Default: `false`. Whether or not to dismiss the toast automatically after a timeout. Inherited from `ToastProvider` if not provided. |
| autoDismissTimeout `number`        | Inherited from `ToastProvider`.                                                                                                      |
| onDismiss: `Id => void`            | Passed in dynamically.                                                                                                               |
| placement `PlacementType`          | Inherited from `ToastProvider`.                                                                                                      |
| transitionDuration `number`        | Inherited from `ToastProvider`.                                                                                                      |
| transitionState: `TransitionState` | Passed in dynamically.                                                                                                               |

## Hook

The `useToast` hook has the following signature:

```jsx
const { addToast, removeToast, removeAllToasts, updateToast, toastStack } = useToasts();
```

The `addToast` method has three arguments:

1.  The first is the content of the toast, which can be any renderable `Node`.
1.  The second is the `Options` object, which can take any shape you like. `Options.appearance` is required when using the `DefaultToast`. When departing from the default shape, you must provide an alternative, compliant `Toast` component.
1.  The third is an optional callback, which is passed the added toast `ID`.

The `removeToast` method has two arguments:

1.  The first is the `ID` of the toast to remove.
1.  The second is an optional callback.

The `removeAllToasts` method has no arguments.

The `updateToast` method has three arguments:

1.  The first is the `ID` of the toast to update.
1.  The second is the `Options` object, which differs slightly from the add method because it accepts a `content` property.
1.  The third is an optional callback, which is passed the updated toast `ID`.

The `toastStack` is an array of objects representing the current toasts, e.g.

```jsx
[
  {
    content: 'Something went wrong',
    id: 'generated-string',
    appearance: 'error',
  },
  { content: 'Item saved', id: 'generated-string', appearance: 'success' },
];
```

## Replaceable Components

To bring each toast notification inline with your app, you can provide alternative components to the `ToastProvider`:

```jsx
import { ToastProvider } from '@blaze-cms/toaster';

const MyCustomToast = ({ appearance, children }) => (
  <div style={{ background: appearance === 'error' ? 'red' : 'green' }}>{children}</div>
);

const App = () => <ToastProvider components={{ Toast: MyCustomToast }}>...</ToastProvider>;
```

To customize the existing component instead of creating a new one, you may import `DefaultToast`:

```jsx
import { DefaultToast } from '@blaze-cms/toaster';
export const MyCustomToast = ({ children, ...props }) => (
  <DefaultToast {...props}>
    <SomethingSpecial>{children}</SomethingSpecial>
  </DefaultToast>
);
```

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