useNotice
useNoticeは、アプリケーションの通知を制御するカスタムフックです。
インポート
import { useNotice } from "@yamada-ui/react"
使い方
通知を表示するには、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> )
通知を閉じる
すべての通知を閉じるには、インスタンスのメソッドのcloseAllを使用します。個別の通知を閉じる場合は、インスタンスから生成された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> )
閉じるイベントをカスタマイズする
閉じるイベントをカスタマイズする場合は、closeStrategyに"element", "button", "both"を設定します。デフォルトは、"button"です。
"element": 要素をクリックして閉じる。"button": 閉じるボタンをクリックして閉じる。"both": 要素と閉じるボタンをクリックして閉じる。
編集可能な例
const notice = useNotice({ isClosable: true, closeStrategy: "element" }) return ( <Button onClick={() => notice({ title: "Notification", description: "This is description.", isClosable: true, closeStrategy: "element", }) } > Show notification </Button> )
コンポーネントをカスタマイズする
描写するコンポーネントをカスタマイズする場合は、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> )
GitHubでこのページを編集する