useNotice

useNotice is a custom hook that controls the notifications of the application.

const notice = useNotice()

return (
  <Button
    onClick={() =>
      notice({
        title: "シェリル・ノーム",
        description: "私の歌を聴けー！",
      })
    }
  >
    Show Notice
  </Button>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

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

import { useNotice } from "@/components/ui"

import { useNotice } from "@workspaces/ui"

const notice = useNotice()

Change Variant

const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["plain", "solid", "subtle", "surface", "island"] as const}>
      {(variant) => (
        <Button
          key={variant}
          onClick={() => {
            notice({
              variant,
              description: "こんなサービス、滅多にしないんだからね！",
              title: "シェリル・ノーム",
              withIcon: variant !== "island" ? true : false,
            })
          }}
        >
          Add "{toTitleCase(variant)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Change Color Scheme

const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["info", "success", "warning", "error"] as const}>
      {(colorScheme) => (
        <Button
          key={colorScheme}
          onClick={() => {
            notice({
              colorScheme,
              description:
                "人は１人じゃ飛べない。飛んじゃいけない。それが分かったから…",
              title: "早乙女アルト",
            })
          }}
        >
          Add "{toTitleCase(colorScheme)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Change Loading Scheme

const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["oval", "grid", "puff", "dots"] as const}>
      {(loadingScheme) => (
        <Button
          key={loadingScheme}
          onClick={() => {
            notice({
              description: "人を本気で好きになるのは命がけなんだな。",
              loadingScheme,
              title: "ミハエル・ブラン",
            })
          }}
        >
          Add "{toTitleCase(loadingScheme)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Change Status

To change the status, set the status to "info" or "success" etc.

const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["info", "success", "warning", "error"] as const}>
      {(status) => (
        <Button
          key={status}
          onClick={() => {
            notice({
              description: "皆抱きしめて！銀河の果てまで！",
              status,
              title: "ランカ・リー",
            })
          }}
        >
          Add "{toTitleCase(status)}" Snack
        </Button>
      )}
    </For>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Change Limit

To change the limit, set the limit to a number.

const notice = useNotice({ limit: 10 })

return (
  <Button
    onClick={() =>
      notice({
        description: "お前の恋は何処にある！",
        title: "クラン・クラン",
      })
    }
  >
    Show Notice
  </Button>
)

If you use this code, you need to add "use client" to the top of the file.

Change Duration

To change the duration, set the duration to a number.

const notice = useNotice({ duration: 10000 })

return (
  <Wrap gap="md">
    <Button
      onClick={() =>
        notice({
          description: "お前も、お前の夢も、俺が守る！",
          title: "オズマ・リー",
        })
      }
    >
      Show Notice
    </Button>

    <Button
      onClick={() =>
        notice({
          description: "お前も、お前の夢も、俺が守る！",
          duration: 5000,
          title: "オズマ・リー",
        })
      }
    >
      Show Notice with Option
    </Button>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Keep Stay

To keep the notice staying, set the duration to null.

const notice = useNotice({ duration: null })

return (
  <Button
    onClick={() =>
      notice({
        description:
          "覚えておきなさい、こんなにいい女滅多にいないんだからねっ！",
        title: "シェリル・ノーム",
      })
    }
  >
    Show Notice
  </Button>
)

If you use this code, you need to add "use client" to the top of the file.

Change Placement

To change the placement, set the placement to "start" or "end" etc.

const notice = useNotice({ duration: null })

return (
  <Wrap gap="md">
    <For
      each={
        [
          "start-start",
          "start-center",
          "start-end",
          "end-start",
          "end-center",
          "end-end",
        ] as const
      }
    >
      {(placement) => (
        <Button
          key={placement}
          onClick={() =>
            notice({
              description: "お前が、お前たちが俺の翼だ！",
              placement,
              title: "早乙女アルト",
            })
          }
        >
          Open "{placement}" Notice
        </Button>
      )}
    </For>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Change Close Strategy

To change the close strategy, set the closeStrategy to "click" or "drag" etc.

const notice = useNotice()

return (
  <Wrap gap="md">
    <For each={["click", "drag", "button"] as const}>
      {(closeStrategy) => (
        <Button
          key={closeStrategy}
          onClick={() =>
            notice({
              closeStrategy,
              description: "お前が、お前たちが俺の翼だ！",
              title: "早乙女アルト",
            })
          }
        >
          {toTitleCase(closeStrategy)} Only
        </Button>
      )}
    </For>

    <For
      each={
        [
          ["click", "drag"],
          ["button", "drag"],
        ] as NoticeCloseStrategy[][]
      }
    >
      {(closeStrategy) => (
        <Button
          key={closeStrategy.join("-")}
          onClick={() =>
            notice({
              closeStrategy,
              description: "お前が、お前たちが俺の翼だ！",
              title: "早乙女アルト",
            })
          }
        >
          {toTitleCase(closeStrategy[0]!)} & {toTitleCase(closeStrategy[1]!)}
        </Button>
      )}
    </For>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Close Notice

To close the notice, use close or closeAll.

const notice = useNotice()
const id = useRef<number | string | null>(null)

const onOpen = () => {
  id.current = notice({
    closable: true,
    description: "お前が好きだ。",
    duration: 30000,
    title: "クラン・クラン",
  })
}

const onClose = () => {
  if (id.current) notice.close(id.current)
}

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

return (
  <Wrap gap="md">
    <Button onClick={onOpen}>Show Notice</Button>
    <Button onClick={onClose}>Close last Notice</Button>
    <Button onClick={onCloseAll}>Close all Notice</Button>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Update Notice

To update the notice, use update.

const notice = useNotice()
const id = useRef<number | string | null>(null)

const onOpen = () => {
  id.current = notice({
    colorScheme: "orange",
    description: "チャンスは目の前にあるものよ。",
    duration: 5000,
    title: "シェリル・ノーム",
  })
}

const onUpdate = () => {
  if (id.current)
    notice.update(id.current, {
      colorScheme: "blue",
      description: "人生はワン･ツー･デカルチャー！！頑張れ、私。",
      duration: 5000,
      title: "ランカ・リー",
    })
}

return (
  <Wrap gap="md">
    <Button onClick={onOpen}>Show Notice</Button>
    <Button onClick={onUpdate}>Update last Notice</Button>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Configuration

Make Notice Always Expand

To make the notice always expand, set the expand to true.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    expand: true,
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}

Change Placement

To change the placement, set the placement to "start" or "end" etc.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    placement: "end-end",,
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}

Change Limit

To change the limit, set the limit to a number.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    limit: 5,
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}

Change Close Strategy

To change the close strategy, set the closeStrategy to "click" or "drag" etc.

import { UIProvider, extendConfig } from "@yamada-ui/react"

const config = extendConfig({
  notice: {
    closeStrategy: "click",
  },
})

const App = () => {
  return (
    <UIProvider config={config}>
      <YourApplication />
    </UIProvider>
  )
}