通知センターNotificationCenterExperimental

通知の一覧と管理用の UI です。

プレビュー

状態とバリエーション

未読あり

未読がある場合はトリガーにバッジを出し、行を強調します。

すべて既読

未読がない場合はトリガーのバッジと一括既読操作を出しません。

空状態

通知がない場合も、空であることをポップオーバー内で伝えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
notificationsNotification[]-表示する通知データです。
labelsNotificationCenterLabels-トリガー、見出し、空状態、操作名の文言を差し替えます。
onMarkAsRead(id: string) => void-未読通知を既読にする操作で呼び出します。
onLinkClick(id: string) => void-通知行をクリックしたときに呼び出します。
onClearAll() => void-未読通知をまとめて既読にする操作で呼び出します。

使い方

import { NotificationCenter, type Notification, type NotificationCenterLabels } from "@gunjo/ui"
import { useState } from "react"

const labels: NotificationCenterLabels = {
  toggle: "通知を開く",
  title: "通知",
  clearAll: "すべて既読",
  emptyTitle: "通知はありません",
  markAsRead: "既読にする",
  viewHistory: "通知履歴をすべて見る",
}

const initialNotifications: Notification[] = [
  {
    id: "project-approved",
    title: "レビューが承認されました",
    description: "デザインシステムの更新レビューが承認されました。",
    timestamp: "5分前",
    read: false,
  },
  {
    id: "comment",
    title: "新しいコメント",
    description: "Hikaby がプルリクエストにコメントしました。",
    timestamp: "1時間前",
    read: false,
  },
  {
    id: "deploy",
    title: "デプロイ完了",
    description: "本番デプロイ #1234 が完了しました。",
    timestamp: "昨日",
    read: true,
  },
]

export function Notifications() {
  const [notifications, setNotifications] = useState(initialNotifications)

  return (
    <NotificationCenter
      notifications={notifications}
      labels={labels}
      onMarkAsRead={(id) =>
        setNotifications((current) =>
          current.map((notification) =>
            notification.id === id ? { ...notification, read: true } : notification
          )
        )
      }
      onClearAll={() =>
        setNotifications((current) =>
          current.map((notification) => ({ ...notification, read: true }))
        )
      }
    />
  )
}

使用コンポーネント

NotificationCenterPopoverButtonScrollArea

関連コンポーネント

BannerToastBadge

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Notification Center