7.0.2 • Published 2 years ago

@chakra-ui/toast v7.0.2

Weekly downloads
61,386
License
MIT
Repository
github
Last release
2 years ago

@chakra-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

import useToast from "@chakra-ui/toast"

Usage

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

import * as React from "react"
import useToast from "@chakra-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.

import * as React from "react"
import useToast from "@chakra-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).

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:

import * as React from "react"
import useToast from "@chakra-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.

import * as React from "react"
import useToast from "@chakra-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>
  )
}
7.0.0

2 years ago

7.0.2

2 years ago

7.0.1

2 years ago

6.1.4

2 years ago

6.1.3

2 years ago

6.1.2

2 years ago

6.0.3

2 years ago

6.0.2

2 years ago

6.1.0

2 years ago

6.1.1

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.0.9

2 years ago

4.0.8

2 years ago

4.0.5

3 years ago

4.0.4

3 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.1

3 years ago

4.0.0

3 years ago

4.0.3

3 years ago

4.0.2

3 years ago

3.0.13

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.9

3 years ago

3.0.12

3 years ago

3.0.10

3 years ago

3.0.11

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

2.1.0

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.6

3 years ago

2.0.0-next.4

3 years ago

2.0.0-next.5

3 years ago

2.0.0-next.3

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.0

3 years ago

2.0.0-next.1

3 years ago

1.5.9

3 years ago

1.5.8

3 years ago

1.5.7

3 years ago

1.5.5

3 years ago

1.5.4

3 years ago

1.5.3

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

4 years ago

1.5.6

3 years ago

1.4.1

4 years ago

1.4.0

4 years ago

1.3.4

4 years ago

1.3.2

4 years ago

1.3.1

4 years ago

1.3.0

4 years ago

1.2.11

4 years ago

1.2.10

4 years ago

1.2.10-next.0

4 years ago

1.2.9

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.9

4 years ago

1.1.10

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-rc.8

5 years ago

1.0.0-rc.7

5 years ago

1.0.0-rc.6

5 years ago

1.0.0-rc.5

5 years ago

1.0.0-rc.4

5 years ago

1.0.0-rc.3

5 years ago

1.0.0-rc.2

5 years ago

1.0.0-rc.1

5 years ago

1.0.0-next.7

5 years ago

1.0.0-rc.0

5 years ago

1.0.0-next.5

5 years ago

1.0.0-next.6

5 years ago

1.0.0-next.4

5 years ago

1.0.0-next.3

5 years ago

1.0.0-next.2

5 years ago

1.0.0-next.1

5 years ago

1.0.0-next.2251

5 years ago

1.0.0-next.0

5 years ago