Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

useSnacks

useSnacksは、フォームなどで使用される通知を制御するカスタムフックです。

ソース@yamada-ui/snacks

インポート

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

使い方

通知を表示するには、useSnacksを使用します。useSnacksは、通知を表示・制御するインスタンスを返します。

編集可能な例

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!

通知をカスタマイズする

通知のオプションは、useNoticeの引数かuseNoticeから返されたインスタンスの引数に渡します。

方向を変更する

方向を変更する場合は、directionにtopまたはbottomを設定します。デフォルトでは、topが設定されています。

編集可能な例

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!

余白を調整する

Snacksは折りたたむアニメーションが実装されています。もし、親要素にgapなどが設定されている場合は不自然なアニメーションになってしまいます。その場合は、gutterで余白を調整します。

編集可能な例

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!

表示時間を変更する

表示時間の変更は、durationで変更します。

編集可能な例

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で変更します。デフォルトでは、3が設定されています。

編集可能な例

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!

閉じるボタンを無効にする

閉じるボタンを無効にする場合は、isClosableをfalseに設定します。

編集可能な例

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!

バリアントを変更する

Alertと同じバリアントを使用します。

編集可能な例

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!

ステータスを変更する

ステータスは、通知の色を変更します。

編集可能な例

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!

カラースキーマを使う

色の変更は、colorSchemeで変更します。

編集可能な例

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!

ローディングのバリアントを変更する

ローディングアイコンのバリアントの変更は、icon.variantで変更します。

編集可能な例

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!

通知を更新する

通知を更新する場合は、インスタンスから生成されたidを指定して新しいオプションを渡します。

編集可能な例

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!

通知を閉じる

すべての通知を閉じるには、インスタンスのメソッドのcloseAllを使用します。個別の通知を閉じる場合は、インスタンスから生成されたidを指定します。

編集可能な例

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!

閉じるイベントをカスタマイズする

閉じるイベントをカスタマイズする場合は、closeStrategyに"element", "button", "both"を設定します。デフォルトは、"button"です。

  • "element": 要素をクリックして閉じる。
  • "button": 閉じるボタンをクリックして閉じる。
  • "both": 要素と閉じるボタンをクリックして閉じる。

編集可能な例

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!

コンポーネントをカスタマイズする

描写するコンポーネントをカスタマイズする場合は、componentを使用します。

編集可能な例

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!

スタイルをカスタマイズする

編集可能な例

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!

GitHubでこのページを編集する

前useResizeObserver次useTheme