useSnacks

useSnacks is a custom hook for controlling notifications used in forms and other similar situations.

Import

import { useSnacks } from "@yamada-ui/react"

Copied!

Usage

To display notifications, use useSnacks. useSnacks returns an instance for displaying and controlling notifications.

Editable example

const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Customize Notifications

Pass notification options as arguments to useNotice or to the instance returned from useNotice.

Options passed to the instance returned from useNotice take precedence.

Change Direction

To change the direction, set direction to either top or bottom. By default, top is set.

Editable example

const { snack, snacks } = useSnacks({ direction: "bottom" })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Adjust Margins

Snacks has a collapsing animation implemented. If the parent element has settings like gap, it may result in an unnatural animation. In that case, adjust the margin with gutter.

By default, gutter adds a negative margin. If you want to disable the negative margin, set negateMargin to false.

Editable example

const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "lg"]} negateMargin={false} mb="-md" />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Change Display Duration

Change the display duration with duration.

Editable example

const { snack, snacks } = useSnacks({ duration: 8000 })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
            duration: 10000,
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Limit the Number of Displays

To limit the number of displays, change it with limit. By default, 3 is set.

If you want to display an unlimited number of notifications, set it to null.

Editable example

const { snack, snacks } = useSnacks({ limit: 5 })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Disable the Close Button

To disable the close button, set isClosable to false.

Editable example

const { snack, snacks } = useSnacks({ isClosable: false })

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
            isClosable: false,
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Change Variant

Uses the same variants as Alert.

Editable example

const { snack, snacks } = useSnacks()
const variants = ["basic", "solid", "subtle", "top-accent", "left-accent"]

return (
  <VStack>
    <Wrap gap="md">
      {variants.map((variant) => (
        <Button
          key={variant}
          onClick={() =>
            snack({
              title: "孫悟空",
              description: "オッス！オラ悟空！",
              variant,
            })
          }
        >
          Add "{variant}" Snack
        </Button>
      ))}

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Change Status

Status changes the color of the notification.

Editable example

const { snack, snacks } = useSnacks()
const statuses = ["info", "success", "warning", "error", "loading"]

return (
  <VStack>
    <Wrap gap="md">
      {statuses.map((status) => (
        <Button
          key={status}
          onClick={() =>
            snack({
              title: "孫悟空",
              description: "オッス！オラ悟空！",
              status,
            })
          }
        >
          Add "{status}" Snack
        </Button>
      ))}

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Use Color Scheme

Change the color with colorScheme.

Editable example

const { snack, snacks } = useSnacks()
const colorSchemes = ["green", "purple", "gray", "pink"]

return (
  <VStack>
    <Wrap gap="md">
      {colorSchemes.map((colorScheme) => (
        <Button
          key={colorScheme}
          onClick={() =>
            snack({
              title: "孫悟空",
              description: "オッス！オラ悟空！",
              colorScheme,
            })
          }
        >
          Add "{colorScheme}" Snack
        </Button>
      ))}

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Change Loading Variant

Change the variant of the loading icon with icon.variant.

Editable example

const { snack, snacks } = useSnacks()
const variants = ["oval", "puff", "dots", "grid"]

return (
  <VStack>
    <Wrap gap="md">
      {variants.map((variant) => (
        <Button
          key={variant}
          onClick={() =>
            snack({
              title: "孫悟空",
              description: "オッス！オラ悟空！",
              status: "loading",
              icon: { variant },
            })
          }
        >
          Add "{variant}" Snack
        </Button>
      ))}

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Update Notifications

To update a notification, specify the id generated from the instance and pass new options.

Editable example

const { snack, snacks } = useSnacks()
const ref = useRef<string | number | undefined>(undefined)

const onOpen = () => {
  ref.current = snack({
    title: "孫悟空",
    description: "オッス！オラ悟空！",
  })
}

const onUpdate = () => {
  if (ref.current)
    snack.update(ref.current, {
      title: "ベジータ",
      description: "よくも…よくも…オレの…ブルマを!!",
      colorScheme: "purple",
    })
}

const onCloseAll = () => {
  snack.closeAll()
}

return (
  <VStack>
    <Wrap gap="md">
      <Button colorScheme="primary" onClick={onOpen}>
        Add Snack
      </Button>
      <Button onClick={onUpdate}>Update last Snack</Button>
      <Button colorScheme="danger" onClick={onCloseAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Close Notifications

To close all notifications, use the closeAll method of the instance. To close an individual notification, specify the id generated from the instance.

Editable example

const { snack, snacks } = useSnacks()
const ref = useRef<string | number | undefined>(undefined)

const onOpen = () => {
  ref.current = snack({
    title: "孫悟空",
    description: "オッス！オラ悟空！",
  })
}

const onClose = () => {
  if (ref.current) snack.close(ref.current)
}

const onCloseAll = () => {
  snack.closeAll()
}

return (
  <VStack>
    <Wrap gap="md">
      <Button colorScheme="primary" onClick={onOpen}>
        Add Snack
      </Button>
      <Button onClick={onClose}>Close last Snack</Button>
      <Button colorScheme="danger" onClick={onCloseAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Customize Close Event

To customize the close event, set closeStrategy to "element", "button", or "both". The default is "button".

"element": Close by clicking on the element.
"button": Close by clicking on the close button.
"both": Close by clicking on either the element or the close button.

Editable example

const { snack, snacks } = useSnacks({ closeStrategy: "element" })
const ref = useRef<string | number | undefined>(undefined)

const onCloseAll = () => {
  snack.closeAll()
}

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
            closeStrategy: "element",
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Customize Components

To customize the component being rendered, use component.

Editable example

const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            component: () => (
              <Box color="white" py={3} px={4} bg="purple.500">
                ギャルのパンティーおくれーーーっ！！！！！
              </Box>
            ),
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Customize Styles

Editable example

const { snack, snacks } = useSnacks()

return (
  <VStack>
    <Wrap gap="md">
      <Button
        colorScheme="primary"
        onClick={() => {
          snack({
            title: "孫悟空",
            description: "オッス！オラ悟空！",
            style: {
              w: "60%",
            },
          })
        }}
      >
        Add Snack
      </Button>

      <Button colorScheme="danger" onClick={snack.closeAll}>
        Close all Snack
      </Button>
    </Wrap>

    <Snacks snacks={snacks} gutter={[0, "md"]} />

    <Input placeholder="Input" />
  </VStack>
)

Copied!

Edit this page on GitHub

PrevioususeResizeObserver NextuseTheme