# @teste-ui/toast

> description

Latest version **3.0.2** (published 2022-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teste-ui/toast
pnpm add @teste-ui/toast
yarn add @teste-ui/toast
bun add @teste-ui/toast
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2022-07-14 |
| First published | 2022-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 140.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Segun Adebayo |
| Maintainers | benits |
| Keywords | theme, theming, ui mode, ui |

## Links

- npm: https://www.npmjs.com/package/@teste-ui/toast
- Repository: https://github.com/teste-ui/teste-ui
- Homepage: https://github.com/teste-ui/teste-ui#readme
- Issues: https://github.com/teste-ui/teste-ui/issues
- npm.io page: https://npm.io/package/@teste-ui/toast

## Dependencies (8)

- [@teste-ui/alert](https://npm.io/package/@teste-ui/alert.md) 2.0.4
- [@teste-ui/hooks](https://npm.io/package/@teste-ui/hooks.md) 2.0.4
- [@teste-ui/theme](https://npm.io/package/@teste-ui/theme.md) 2.1.3
- [@teste-ui/utils](https://npm.io/package/@teste-ui/utils.md) 2.0.4
- [@teste-ui/portal](https://npm.io/package/@teste-ui/portal.md) 2.0.4
- [@teste-ui/transition](https://npm.io/package/@teste-ui/transition.md) 2.0.4
- [@teste-ui/react-utils](https://npm.io/package/@teste-ui/react-utils.md) 2.0.1
- [@teste-ui/close-button](https://npm.io/package/@teste-ui/close-button.md) 2.0.4

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2022-07-14

## README

# @teste-ui/toast

The toast is used to show alerts on top of an overlay.

The toast will close itself when the close button is clicked, or after a timeout
— the default is 5 seconds.

Toasts can be configured to appear at either the top or the bottom of an
application window, and it is possible to have more than one toast onscreen at a
time.

## Import component

```js
import useToast from "@teste-ui/toast"
```

## Usage

```jsx
function ToastExample() {
  const toast = useToast()

  return (
    <Button
      onClick={() =>
        toast({
          title: "Account created.",
          description: "We've created your account for you.",
          status: "success",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

### Positioning toast

By default, all the toasts will be positioned on the `top-right` of your
browser.

The following values are allowed: **top-right, top, top-left, bottom-right,
bottom, bottom-left**

```jsx
import * as React from "react"
import useToast from "@teste-ui/toast"

const Position = () => {
  const toast = useToast()

  const notify = () => {
    toast({ title: "Success Notification !", status: "success" })
  }

  return <button onClick={notify}>Notify</button>
}
```

### Set autoClose delay or disable it

To change the show delay for any toast, simply pass the `duration` prop when
invoking the `toast` function.

> Note 🚨: If you pass `null` as the duration, the toast will always remain on
> screen.

```jsx
import * as React from "react"
import useToast from "@teste-ui/toast"

const Duration = () => {
  const toast = useToast()

  const notify = () => {
    toast({
      duration: 5000,
      title: "I will close after 5 secs",
    })
  }

  return <button onClick={notify}>Notify</button>
}
```

### Render a custom toast component

Display a custom component instead of the default Toast UI.

We provide 2 key `props` to your component, `id`, and `onClose` to close the
toast (to build your custom close button).

```jsx
function Example() {
  const toast = useToast()

  return (
    <Button
      onClick={() => {
        toast({
          position: "bottom-left",
          render: (props) => (
            <Box m={3} color="white" p={3} bg="blue.500">
              Hello World
            </Box>
          ),
        })
      }}
    >
      Show Toast
    </Button>
  )
}
```

### Use a custom id

A custom `id` can be used to replace the one internal auto-generated toast `id`.
You can use a `number` or a `string`.

This is mostly useful when you need to prevent duplication of a specific toast.

### Prevent duplicate

To prevent duplicates, you can check if a given toast is active by calling
`toast.isActive(id)` like the snippet below. Or, you can use a custom `toastId`:

```js
import * as React from "react"
import useToast from "@teste-ui/toast"

const Example = () => {
  const toast = useToast()

  const id = "login-toast"

  const notify = () => {
    if (!toast.isActive(id)) {
      toast({ title: "Dude! I cannot be duplicated" })
    }
  }

  return (
    <div>
      <button onClick={notify}>Notify</button>
    </div>
  )
}
```

### Update a toast

When you update a toast, the toast options and the content are inherited but
don't worry you can update them.

```js
import * as React from "react"
import useToast from "@teste-ui/toast"

const Update = () => {
  const toast = useToast()

  const id = React.useRef(null)

  const notify = () => {
    id.current = toast({
      title: "Chidori is not available!",
      duration: null,
    })
  }

  const update = () => {
    toast.update(id.current, {
      title: "Sharingan is all you have!",
      status: "success",
      duration: 5000,
    })
  }

  return (
    <div>
      <button onClick={notify}>Notify</button>
      <button onClick={update}>Update</button>
    </div>
  )
}
```

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