Snacks
Snacks is a component for controlling notifications used in forms and other similar situations.
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "こいつ、動くぞ！",
title: "アムロ・レイ",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { useSnacks, Snacks } from "@yamada-ui/react"
import { useSnacks, Snacks } from "@/components/ui"
import { useSnacks, Snacks } from "@workspaces/ui"
<Snacks />
Change Variant
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["plain", "solid", "subtle", "surface", "island"]}>
{(variant) => (
<Button
key={variant}
onClick={() => {
snack({
variant,
description: "美しいものが、嫌いな人がいるのかしら？",
title: "ララァ・スン",
withIcon: variant !== "island" ? true : false,
})
}}
>
Add "{toTitleCase(variant)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change Color Scheme
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme) => (
<Button
key={colorScheme}
onClick={() => {
snack({
colorScheme,
description:
"見せて貰おうか。連邦軍のモビルスーツの性能とやらを！",
title: "シャア・アズナブル",
})
}}
>
Add "{toTitleCase(colorScheme)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change Status
To change status, set the status prop.
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["info", "success", "warning", "error"]}>
{(status) => (
<Button
key={status}
onClick={() => {
snack({
description: "アムロ、行きまーす！",
status,
title: "アムロ・レイ",
})
}}
>
Add "{toTitleCase(status)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change Loading Scheme
To change loading scheme, set the loadingScheme prop.
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["oval", "grid", "puff", "dots"]}>
{(loadingScheme) => (
<Button
key={loadingScheme}
onClick={() => {
snack({
description: "大丈夫、あなたなら出来るわ。",
loadingScheme,
title: "セイラ・マス",
})
}}
>
Add "{toTitleCase(loadingScheme)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change Direction
To change direction, set "start" or "end" to the direction prop. The default is "start".
const { snack, snacks } = useSnacks({ direction: "end" })
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description:
"認めたくないものだな。自分自身の、若さゆえの過ちというものを。",
title: "シャア・アズナブル",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Limit the Number of Displays
To limit the number of displays, set a number to the limit prop. If you want to display an unlimited number of notifications, set it to null. By default, 3 is set.
const { snack, snacks } = useSnacks({ limit: 5 })
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "殴られもせずに一人前になった奴がどこにいるものか！",
title: "ブライト・ノア",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Set the Display Duration
To set the display duration, set a number (in milliseconds) to the duration prop.
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "それでも男ですか！軟弱者！",
duration: 30000,
title: "セイラ・マス",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Disable the Close Button
To disable the close button, set closable to false.
const { snack, snacks } = useSnacks({ closable: false })
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "ザクとは違うのだよ、ザクとは！",
title: "ランバ・ラル",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Close Notifications
To close notifications, use snack.close or snack.closeAll.
const { snack, snacks } = useSnacks()
const id = useRef<string | undefined>(undefined)
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
id.current = snack({
description: "オレは、生きる！生きて、アイナと添い遂げる！",
title: "シロー・アマダ",
})
}}
>
Add Snack
</Button>
<Button
colorScheme="warning"
onClick={() => {
if (id.current) snack.close(id.current)
}}
>
Close last Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Update Notifications
To update notifications, use snack.update.
const { snack, snacks } = useSnacks()
const id = useRef<string | undefined>(undefined)
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
id.current = snack({
description:
"今の私は、クワトロ・バジーナ大尉だ。それ以上でも、それ以下でもない。",
title: "クワトロ・バジーナ",
})
}}
>
Add Snack
</Button>
<Button
colorScheme="warning"
onClick={() => {
if (id.current)
snack.update(id.current, {
colorScheme: "purple",
description: "そんな大人、修正してやる！",
title: "カミーユ・ビダン",
})
}}
>
Update last Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Props
Similar Components
Alert
Alert is a component that conveys information to the user.
Tip
Tip is a component that displays supplementary information with a built-in icon trigger.
EmptyState
EmptyState is a component used to display when a resource is empty or unavailable.
CircleProgress
CircleProgress is a component that displays progress in a circular progress bar.
Progress
Progress is a component for visually indicating progress.
Skeleton
Skeleton is a component that acts as a placeholder until content is loaded.
Status
Status is component that indicate the status of a process or state.