Nuclear Powered Mushroom

    @chakra-ui/toast
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @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>
      )
    }

    Install

    npm i @chakra-ui/toast

    DownloadsWeekly Downloads

    300,882

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    94 kB

    Total Files

    27

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828