通知

Yamada UIは、アプリケーションで必要な通知をサポートしています。

使い方

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

編集可能な例

const notice = useNotice()

return (
  <Button
    onClick={() =>
      notice({ title: "Notification", description: "This is description." })
    }
  >
    Show notification
  </Button>
)

通知をカスタマイズする

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

オプションは、useNoticeから返されたインスタンスの引数が優先されます。

表示時間を変更する

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

編集可能な例

const notice = useNotice({ duration: 8000 })

return (
  <Button
    onClick={() =>
      notice({
        title: "Notification",
        description: "This is description.",
        duration: 10000,
      })
    }
  >
    Show notification
  </Button>
)

維持させる

表示の維持は、durationをnullにします。

編集可能な例

const notice = useNotice({ duration: null, isClosable: true })

return (
  <Button
    onClick={() =>
      notice({ title: "Notification", description: "This is description." })
    }
  >
    Show notification
  </Button>
)

表示を維持した場合、isClosableをtrueにすることをオススメします。そうしなければ、ユーザーが通知を閉じる手段がありません。

位置を変更する

表示の位置の変更は、placementで変更します。

編集可能な例

const notice = useNotice()
const placements = [
  "top-left",
  "top",
  "top-right",
  "bottom-left",
  "bottom",
  "bottom-right",
]

return (
  <Wrap gap="md">
    {placements.map((placement) => (
      <Button
        key={placement}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            placement,
          })
        }
      >
        Show "{placement}" notification
      </Button>
    ))}
  </Wrap>
)

表示件数を制限する

表示件数を制限には、limitで変更します。

編集可能な例

const notice = useNotice({ limit: 3 })

return (
  <Button
    onClick={() =>
      notice({ title: "Notification", description: "This is description." })
    }
  >
    Show notification
  </Button>
)

バリアントを変更する

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

編集可能な例

const notice = useNotice()
const variants = ["basic", "solid", "subtle", "top-accent", "left-accent"]

return (
  <Wrap gap="md">
    {variants.map((variant) => (
      <Button
        key={variant}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            variant,
          })
        }
      >
        Show "{variant}" notification
      </Button>
    ))}
  </Wrap>
)

ステータスを変更する

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

編集可能な例

const notice = useNotice()
const statuses = ["info", "success", "warning", "error", "loading"]

return (
  <Wrap gap="md">
    {statuses.map((status) => (
      <Button
        key={status}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            status,
          })
        }
      >
        Show "{status}" notification
      </Button>
    ))}
  </Wrap>
)

カラースキーマを使う

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

編集可能な例

const notice = useNotice()
const colorSchemes = ["green", "purple", "gray", "pink"]

return (
  <Wrap gap="md">
    {colorSchemes.map((colorScheme) => (
      <Button
        key={colorScheme}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            colorScheme,
          })
        }
      >
        Show "{colorScheme}" notification
      </Button>
    ))}
  </Wrap>
)

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

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

編集可能な例

const notice = useNotice()
const variants = ["oval", "puff", "dots", "grid"]

return (
  <Wrap gap="md">
    {variants.map((variant) => (
      <Button
        key={variant}
        onClick={() =>
          notice({
            title: "Notification",
            description: "This is description.",
            status: "loading",
            icon: { variant },
          })
        }
      >
        Show "{variant}" notification
      </Button>
    ))}
  </Wrap>
)

通知を更新する

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

編集可能な例

const notice = useNotice()
const ref = useRef<string | number | undefined>(undefined)

const onOpen = () => {
  ref.current = notice({
    title: "Notification",
    description: "This is description.",
    colorScheme: "orange",
    duration: 30000,
  })
}
const onUpdate = () => {
  if (ref.current)
    notice.update(ref.current, {
      title: "Updated notification",
      description: "This is updated description.",
      colorScheme: "blue",
      duration: 30000,
    })
}

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

通知を閉じる

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

編集可能な例

const notice = useNotice()
const ref = useRef<string | number | undefined>(undefined)

const onOpen = () => {
  ref.current = notice({
    title: "Notification",
    description: "This is description.",
    duration: 30000,
    isClosable: true,
  })
}

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

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

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

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

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

編集可能な例

const notice = useNotice({
  component: ({ description }) => (
    <Box color="white" py={3} px={4} bg="purple.500">
      {description}
    </Box>
  ),
})

return (
  <Button onClick={() => notice({ description: "This is description." })}>
    Show notification
  </Button>
)

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

編集可能な例

const notice = useNotice({ style: { maxW: "100%", minW: "100%" } })

return (
  <Wrap gap="md">
    <Button
      onClick={() =>
        notice({
          title: "Notification",
          description: "This is description.",
          isClosable: true,
        })
      }
    >
      Show notification
    </Button>

    <Button
      onClick={() =>
        notice({
          title: "Notification",
          description: "This is description.",
          isClosable: true,
          style: { minW: "60%" },
        })
      }
    >
      Show individual style notification
    </Button>
  </Wrap>
)

コンフィグからカスタマイズする

アプリケーション全体の通知の設定をしたい場合は、コンフィグをカスタマイズします。

例えば、アプリケーション全体で表示の位置を右下にし、件数を3件に制限したい場合は、notice.optionsにオプションを渡します。

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

const customConfig = extendConfig({
  notice: {
    options: {
      placement: "bottom-right",
      limit: 3,
    },
  },
})

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

コンフィグをもっと学びたい場合は、コンフィグをカスタマイズするをご覧ください。

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

前ローディング次ui