ホームページ >ウェブフロントエンド >jsチュートリアル >Chakra UI と Novu を使用して Notion のような通知受信箱を構築する方法
TL;DR
この短い投稿では、デザインに Chakra UI のみを使用し、通知に Novu のみを使用して、Notion の組み込み通知機能を複製する、完全に機能するリアルタイムの通知受信トレイ コンポーネントを再作成した方法について説明します。
これは次のようになります:
このアプリのソース コードとデプロイされたバージョンへのリンクは、投稿の最後にあります。
日常的に Notion を使用している私は、通知エクスペリエンスに本当に感謝しています。これが、私が Notion のアプリを頻繁に使用する理由の大きな部分を占めています。私は興味がありました。Notion の洗練された通知システムに似た受信トレイを再作成するにはどうすればよいでしょうか?結局のところ、Nov の アプリ内通知コンポーネント のおかげで、これは非常に簡単であることがわかりました。
Novu は最近、フルスタック通知コンポーネントをリリースしました。これは、カスタマイズ可能ですぐに使用できる、ステートフルで埋め込み可能な React コンポーネントまたはウィジェットです。
いくつかの簡単な手順で React アプリに追加する方法は次のとおりです。
Nov パッケージをインストールします
$ npm install @novu/react
コンポーネントをインポートします
import { Inbox } from "@novu/react";
アプリ内のコンポーネントを初期化します
function Novu() { return ( <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID" /> ); }
それだけです!これで、完全に機能するアプリ内受信トレイ コンポーネントが完成しました。
箱から出すと、非常に素晴らしい外観です:
自慢ではありませんが、Novu の Inbox は最も柔軟でカスタマイズ可能でもあります。スタイリング方法を確認し、自分で試してみることもできます。
その背後にあるテクノロジーに興味がある場合は、Nov の共同創設者 Dima Grossman が、Novu を構築した方法と理由について素晴らしい投稿を書いています。
受信トレイを Notion の通知パネルのように見せたいですか?問題ありません! Notion のクリーンでミニマルな美学に合わせて、Novu の通知を簡単にラップしてカスタマイズできます。
私がやった方法
@novu/react から Inbox コンポーネントをインポートするだけでなく、Notification コンポーネントと Notices コンポーネントを導入して、各アイテムのレンダリングを完全に制御しました。
import { Inbox, Notification, Notifications } from "@novu/react";
カスタマイズを開始する前に、通知オブジェクトの構造を次に示します。
interface Notification = { id: string; subject?: string; body: string; to: Subscriber; isRead: boolean; isArchived: boolean; createdAt: string; readAt?: string | null; archivedAt?: string | null; avatar?: string; primaryAction?: Action; secondaryAction?: Action; channelType: ChannelType; tags?: string[]; data?: Record0a14c360bdd4b57f9aed16c4468f2e6b; redirect?: Redirect; };
これを武器に、Chakra UI を使用して (Tailwind クラスのラングリングは大変なので)、各通知アイテムをデザインしました。
Notion からインスピレーションを得た通知アイテムを作成する方法は次のとおりです:
const InboxItem = ({ notification }: { notification: Notification }) => { const [isHovered, setIsHovered] = useState(false); const notificationType = notification.tags?.[0]; return ( 4b7cac51a1765c994d12b44d07f507df setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > 70b67a654c20642759e67020ba4ce2a1 780913d168c244a6cbc813e9631057bd {isHovered && ( ac869dff2565ce3c99b6a9e96400dd83 {notification.isRead ? ( b44fef1d35f254362ea62388ec52b72d} onClick={() => notification.unread()} size="sm" variant="ghost" /> ) : ( 03c6d5ea3ab7b4347959c499db5b00c7} onClick={() => notification.read()} size="sm" variant="ghost" /> )} {notification.isArchived ? ( 3cfd40c7575abc043c432c55d958f5ae} onClick={() => notification.unarchive()} size="sm" variant="ghost" /> ) : ( 3580e75d9218c1a99ad8e467a7e12632} onClick={() => notification.archive()} size="sm" variant="ghost" /> )} e82ab842f40e9c7c1d310bc055273e5b )} 48602ce7f7b6ef46d64f004276201e91 2af3e78c3fac2f868fdc1630ebfabe65 {!notification.isRead && ( d0973d6af080ce36f0ecebd1a52a2dbb 8eb777fc706d0a687732b2ce1da8eeaf e82ab842f40e9c7c1d310bc055273e5b )} {notification.avatar !== undefined && ( c78be36342d44eef043dfbd113af0cff )} e82ab842f40e9c7c1d310bc055273e5b 595e43debb7c8c1aeb332353fd32537c d3bd35c3e2fa5f575bb967d9319d833c 2469c90af7ebebb1e424773c0bb3f6a1 {notification.subject} b735fb8965edb39ac28662131d16c063 9c1f092898c6d32b4e9f2513d87408a4 {formatTime(notification.createdAt)} b735fb8965edb39ac28662131d16c063 4bd5fcdaa8332fbfadc1fee39d5e375c {notificationType !== "Mention" && notificationType !== "Comment" && notificationType !== "Invite" && ( 55c4cd13195253b71d80bceac3d86f41 {notification.body} b735fb8965edb39ac28662131d16c063 )} {(notificationType === "Mention" || notificationType === "Comment") && ( 4c52bc74b67675b5b4e4ecf661918106} _hover={{ bg: "rgba(0, 0, 0, 0.03)" }} pl="2px" pr="5px" height="25px" > 61f3b681e399ba6adf2eff29dce688cd {notification.body} b735fb8965edb39ac28662131d16c063 a1cb88e6789f399807801ea3799938af )} {notificationType === "Invite" && ( 8bcb5d0fb73cfd63ca46ec500e8caf04 {notification.body} a1cb88e6789f399807801ea3799938af )} {notificationType === "Comment" && ( d0973d6af080ce36f0ecebd1a52a2dbb 57dcbae56177b050f09df98408bb9c1c John Doe b735fb8965edb39ac28662131d16c063 10440fafb792e120b83cb3774d995ac2 This is a notification Comment made by John Doe and posted on the page Top Secret Project b735fb8965edb39ac28662131d16c063 e82ab842f40e9c7c1d310bc055273e5b )} f8be7ee026a7d3159af37f9d7cf0fe70 {notification.primaryAction && ( 5fefbc18a2f204e2177a4ee2d95b376e {notification.primaryAction.label} a1cb88e6789f399807801ea3799938af )} {notification.secondaryAction && ( cb2ce527817932c2f24f3867a32e16c9 {notification.secondaryAction.label} a1cb88e6789f399807801ea3799938af )} b2c7e34c6548c52c748009ee7a52300f 48602ce7f7b6ef46d64f004276201e91 4bd5fcdaa8332fbfadc1fee39d5e375c e82ab842f40e9c7c1d310bc055273e5b ); };
コードでわかるように、次の通知キーを利用しました:
notification.data オブジェクトには、アプリケーション ロジックがユーザーまたはサブスクライバーに関連付ける実用的な情報を含めることができます。この柔軟な構造により、通知を特定のユースケースに合わせて調整し、より豊富でコンテキストに応じた情報をユーザーに提供できます。
notification.data の使用例:
E コマース注文の更新:
notification.data = { orderId: "ORD-12345", status: "shipped", trackingNumber: "1Z999AA1234567890", estimatedDelivery: "2023-09-25" };
ソーシャルメディアでのやり取り:
notification.data = { postId: "post-789", interactionType: "like", interactingUser: "johndoe", interactionTime: "2023-09-22T14:30:00Z" };
金融取引:
notification.data = { transactionId: "TRX-98765", amount: 150.75, currency: "USD", merchantName: "Coffee Shop", category: "Food & Drink" };
notification.data オブジェクトを利用すると、アプリケーションの特定の要件とシームレスに統合された、より有益で実用的な通知を作成できます。
この柔軟性により、ユーザーに必要な情報を正確に提供できるようになり、ユーザーのエクスペリエンスと通知システムの全体的な有効性が向上します。
コードを詳しく調べた場合は、通知状態を管理するために 4 つのキー フックが使用されていることに気づいたかもしれません。
The novu/react package exposes these hooks, offering enhanced flexibility for managing notification states. It's important to note that these hooks not only update the local state but also synchronize changes with the backend.
These hooks provide a seamless way to:
By utilizing these hooks, you can create more interactive and responsive notification systems in your applications.
I've implemented Notion-inspired sidebar navigation to enhance the similarity to the Notion theme. This design choice aims to capture the essence and aesthetics of Notion's interface, creating a familiar and intuitive environment for users.
For the icons, I've leveraged the versatile react-icons library, which offers a wide range of icon sets to choose from.
$ npm install react-icons
import { FiArchive, FiSearch, FiHome, FiInbox, FiSettings, FiChevronDown } from "react-icons/fi"; import { FaRegCheckSquare, FaUserFriends } from "react-icons/fa"; import { PiNotificationFill } from "react-icons/pi"; import { BsFillFileTextFill, BsTrash } from "react-icons/bs"; import { AiOutlineCalendar } from "react-icons/ai"; import { GrDocumentText } from "react-icons/gr"; const AppContainer = () => { const borderColor = useColorModeValue("gray.200", "gray.700"); const [isInboxOpen, setIsInboxOpen] = useState(true); const toggleInbox = () => { setIsInboxOpen(!isInboxOpen); }; return ( 58880ab737844eb28e5aac79cf984905 53e4abd0f47117bd8ceab2fe75a74a1d baf0203f50e222f9ca610fe0c1f36b3d {/* Sidebar */} cfab9c6c71f1954b9e6595bc46518510 6ab8a53577ccdcc86bd075e35d610f0b 3dc48a92ee156f11cde9d2b97b243652 b20acbf589ea944c78f8766f41da560c{" "} Workspace b735fb8965edb39ac28662131d16c063 14b82e3184e2b57d93e982934cbc254b} variant="ghost" size="sm" /> 4bd5fcdaa8332fbfadc1fee39d5e375c 83782d72126075731028d150c0608b20 7cfc2f108faa026e31618afb3fb01e4d 2c345aa4e6a5080ea45a8f471b627c97 ec1bdc4b24386058e26fda2ba3aed40e 1e6e13d5ec41c46ae3e08b2ca040eb01 48602ce7f7b6ef46d64f004276201e91 4701f3179d145f6a78e76d7f4143c83e Favorites b735fb8965edb39ac28662131d16c063 83782d72126075731028d150c0608b20 9adb33cb93655d1585cd95c2cf69e12c 852f6e7cd5b049d30afde722012ff0b2 48602ce7f7b6ef46d64f004276201e91 4701f3179d145f6a78e76d7f4143c83e Private b735fb8965edb39ac28662131d16c063 83782d72126075731028d150c0608b20 e3ea277f0985f322932b99bdff84e57d 4ea3094a6a81532caf844a8602b336b1 c20634fcbab956079497835093b2d0a2 48602ce7f7b6ef46d64f004276201e91 e82ab842f40e9c7c1d310bc055273e5b // ... (rest of the code)
Another important aspect was time formatting to match how Notion does it:
function formatTime(timestamp: number | string | Date): string { const date = new Date(timestamp); const now = new Date(); const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000); const secondsInMinute = 60; const secondsInHour = secondsInMinute * 60; const secondsInDay = secondsInHour * 24; const secondsInWeek = secondsInDay * 7; const secondsInYear = secondsInDay * 365; if (diffInSeconds e682f0d4e5b73da8ff2832520c99a736 { const borderColor = useColorModeValue("gray.200", "gray.700"); const [isInboxOpen, setIsInboxOpen] = useState(true); const toggleInbox = () => { setIsInboxOpen(!isInboxOpen); }; return ( 58880ab737844eb28e5aac79cf984905 53e4abd0f47117bd8ceab2fe75a74a1d baf0203f50e222f9ca610fe0c1f36b3d {/* Sidebar */} cfab9c6c71f1954b9e6595bc46518510 6ab8a53577ccdcc86bd075e35d610f0b 3dc48a92ee156f11cde9d2b97b243652 b20acbf589ea944c78f8766f41da560c{" "} Workspace b735fb8965edb39ac28662131d16c063 14b82e3184e2b57d93e982934cbc254b} variant="ghost" size="sm" /> 4bd5fcdaa8332fbfadc1fee39d5e375c 83782d72126075731028d150c0608b20 7cfc2f108faa026e31618afb3fb01e4d 2c345aa4e6a5080ea45a8f471b627c97 ec1bdc4b24386058e26fda2ba3aed40e 1e6e13d5ec41c46ae3e08b2ca040eb01 48602ce7f7b6ef46d64f004276201e91 4701f3179d145f6a78e76d7f4143c83e Favorites b735fb8965edb39ac28662131d16c063 83782d72126075731028d150c0608b20 9adb33cb93655d1585cd95c2cf69e12c 852f6e7cd5b049d30afde722012ff0b2 48602ce7f7b6ef46d64f004276201e91 4701f3179d145f6a78e76d7f4143c83e Private b735fb8965edb39ac28662131d16c063 83782d72126075731028d150c0608b20 e3ea277f0985f322932b99bdff84e57d 4ea3094a6a81532caf844a8602b336b1 c20634fcbab956079497835093b2d0a2 48602ce7f7b6ef46d64f004276201e91 e82ab842f40e9c7c1d310bc055273e5b {/* Main Content Area */} e4ca87affdb73bc45db7e50ccc7b7f75 {/* Injected Content Behind the Inbox */} ba61fae2eacf018ca4efc82bc9f69db0 5d6941a86e2262d3aa807bdcc232680e Notion Inbox Notification Theme 7e3c573f6de27f9eed67379a7ba4d3d4 9aaa523a196d151038751935f2449ce2 Checkout the deployed version now b735fb8965edb39ac28662131d16c063 fb2adae2f86b9f5522fe447a10813315 window.open('https://inbox.novu.co/', '_blank')} > Visit Playground a1cb88e6789f399807801ea3799938af e82ab842f40e9c7c1d310bc055273e5b {/* Inbox Popover */} {isInboxOpen && ( 020f64a6e9fd63fc0825d8c0e93db87d 7f5325fcf2b10c5bc43eab18ac10a409 87a5d04d66aa50e1ea9c499889cec4d7 ( f0504203d773cad1da02a179a6de1549 )} /> b2ced19ccede734514cda9045f1b122d e82ab842f40e9c7c1d310bc055273e5b )} e82ab842f40e9c7c1d310bc055273e5b 4bd5fcdaa8332fbfadc1fee39d5e375c e82ab842f40e9c7c1d310bc055273e5b 4bd5fcdaa8332fbfadc1fee39d5e375c ); }; // Sidebar Item Component interface SidebarItemProps { icon: React.ElementType; label: string; isActive?: boolean; external?: boolean; onClick?: () => void; } const SidebarItem: React.FC790952732ffa6fb795c93e59a1997e11 = ({ icon, label, isActive = false, external = false, onClick, }) => { return ( b8b86c0cfc487b024751cdc42643640d 098332d84cc97735166a7fe2def9738b 696c39ce2565d42afe6802b3d93010b4{label}b735fb8965edb39ac28662131d16c063 b2c7e34c6548c52c748009ee7a52300f ); }; const InboxItem = ({ notification }: { notification: Notification }) => { const [isHovered, setIsHovered] = useState(false); const notificationType = notification.tags?.[0]; return ( 4b7cac51a1765c994d12b44d07f507df setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > 70b67a654c20642759e67020ba4ce2a1 780913d168c244a6cbc813e9631057bd {isHovered && ( ac869dff2565ce3c99b6a9e96400dd83 {notification.isRead ? ( b44fef1d35f254362ea62388ec52b72d} onClick={() => notification.unread()} size="sm" variant="ghost" /> ) : ( 03c6d5ea3ab7b4347959c499db5b00c7} onClick={() => notification.read()} size="sm" variant="ghost" /> )} {notification.isArchived ? ( 3cfd40c7575abc043c432c55d958f5ae} onClick={() => notification.unarchive()} size="sm" variant="ghost" /> ) : ( 3580e75d9218c1a99ad8e467a7e12632} onClick={() => notification.archive()} size="sm" variant="ghost" /> )} e82ab842f40e9c7c1d310bc055273e5b )} 48602ce7f7b6ef46d64f004276201e91 2af3e78c3fac2f868fdc1630ebfabe65 {!notification.isRead && ( d0973d6af080ce36f0ecebd1a52a2dbb 8eb777fc706d0a687732b2ce1da8eeaf e82ab842f40e9c7c1d310bc055273e5b )} {notification.avatar !== undefined && ( c78be36342d44eef043dfbd113af0cff )} e82ab842f40e9c7c1d310bc055273e5b 595e43debb7c8c1aeb332353fd32537c d3bd35c3e2fa5f575bb967d9319d833c 2469c90af7ebebb1e424773c0bb3f6a1 {notification.subject} b735fb8965edb39ac28662131d16c063 9c1f092898c6d32b4e9f2513d87408a4 {formatTime(notification.createdAt)} b735fb8965edb39ac28662131d16c063 4bd5fcdaa8332fbfadc1fee39d5e375c {notificationType !== "Mention" && notificationType !== "Comment" && notificationType !== "Invite" && ( 55c4cd13195253b71d80bceac3d86f41 {notification.body} b735fb8965edb39ac28662131d16c063 )} {(notificationType === "Mention" || notificationType === "Comment") && ( 4c52bc74b67675b5b4e4ecf661918106} _hover={{ bg: "rgba(0, 0, 0, 0.03)" }} pl="2px" pr="5px" height="25px" > 61f3b681e399ba6adf2eff29dce688cd {notification.body} b735fb8965edb39ac28662131d16c063 a1cb88e6789f399807801ea3799938af )} {notificationType === "Invite" && ( 8bcb5d0fb73cfd63ca46ec500e8caf04 {notification.body} a1cb88e6789f399807801ea3799938af )} {notificationType === "Comment" && ( d0973d6af080ce36f0ecebd1a52a2dbb 57dcbae56177b050f09df98408bb9c1c John Doe b735fb8965edb39ac28662131d16c063 10440fafb792e120b83cb3774d995ac2 This is a notification Comment made by John Doe and posted on the page Top Secret Project b735fb8965edb39ac28662131d16c063 e82ab842f40e9c7c1d310bc055273e5b )} f8be7ee026a7d3159af37f9d7cf0fe70 {notification.primaryAction && ( 5fefbc18a2f204e2177a4ee2d95b376e {notification.primaryAction.label} a1cb88e6789f399807801ea3799938af )} {notification.secondaryAction && ( cb2ce527817932c2f24f3867a32e16c9 {notification.secondaryAction.label} a1cb88e6789f399807801ea3799938af )} b2c7e34c6548c52c748009ee7a52300f 48602ce7f7b6ef46d64f004276201e91 4bd5fcdaa8332fbfadc1fee39d5e375c e82ab842f40e9c7c1d310bc055273e5b ); }; function formatTime(timestamp: number | string | Date): string { const date = new Date(timestamp); const now = new Date(); const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000); const secondsInMinute = 60; const secondsInHour = secondsInMinute * 60; const secondsInDay = secondsInHour * 24; const secondsInWeek = secondsInDay * 7; const secondsInYear = secondsInDay * 365; if (diffInSeconds < secondsInMinute) { return `${diffInSeconds} seconds`; } else if (diffInSeconds < secondsInHour) { const minutes = Math.floor(diffInSeconds / secondsInMinute); return `${minutes} minute${minutes !== 1 ? 's' : ''}`; } else if (diffInSeconds < secondsInDay) { const hours = Math.floor(diffInSeconds / secondsInHour); return `${hours} hour${hours !== 1 ? 's' : ''}`; } else if (diffInSeconds < secondsInWeek) { const days = Math.floor(diffInSeconds / secondsInDay); return `${days} day${days !== 1 ? 's' : ''}`; } else if (diffInSeconds < secondsInYear) { const options: Intl.DateTimeFormatOptions = { month: "short", day: "numeric" }; return date.toLocaleDateString(undefined, options); } else { return date.getFullYear().toString(); } } export default AppContainer;
Ready to get customizing? Here’s the source code for the Notion Inbox theme. You can also see and play with it live in our Inbox playground. I also did the same for a Reddit notifications example. Two totally different experiences, but powered by the same underlying component and notifications infrastructure.
以上がChakra UI と Novu を使用して Notion のような通知受信箱を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。