如何使用 Chakra UI 和 Novu 建立類似概念的通知收件匣
- DDD原創
- 2024-10-03 06:20:02899瀏覽
TL;DR
在這篇短文中，您將了解我如何重新建立一個功能齊全的即時通知收件匣元件，該元件僅使用 Chakra UI 進行設計並使用 Novu 進行通知，從而複製 Notion 的內建通知功能。
它看起來是這樣的：
該應用程式的原始程式碼和部署版本的連結位於帖子末尾。
作為一名日常 Notion 用戶，我真的很欣賞他們的通知體驗，這也是我如此頻繁使用他們的應用程式的一個重要原因。我很好奇——如何重新創建一個類似於 Notion 的時尚通知系統的收件匣？事實證明，這非常簡單，這要歸功於 Novu 的應用內通知組件。
Novu 最近推出了他們的全端通知元件——一個有狀態、可嵌入的 React 元件或小部件，可自訂且隨時可用。
以下是如何透過幾個簡單的步驟將其添加到您的 React 應用程式中：
-
安裝 Novu 軟體包
$ npm install @novu/react
-
導入元件
import { Inbox } from "@novu/react"; -
初始化應用程式中的元件
function Novu() { return ( <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID" /> ); }
就是這樣！您現在已經有了一個功能齊全的應用程式內收件匣元件。
開箱即用，看起來非常棒：
不是吹牛，Novu 的收件匣也恰好是最靈活和可自訂的。看看如何設計它，甚至自己嘗試。
如果您對其背後的技術感興趣，Novu 的聯合創始人 Dima Grossman 寫了一篇很棒的文章，介紹了他們如何以及為何構建它。
像 Notion 一樣設計收件匣
希望您的收件匣看起來像 Notion 的通知面板嗎？沒問題！您可以輕鬆包裝和自訂 Novu 的通知，以適應 Notion 乾淨、簡約的美感。
我是怎麼做到的
我引入了Notification 和Notifications 元件來完全控制渲染每個項目，而不是只從@novu/react 匯入Inbox 元件。
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 類很累人）來設計每個通知項目。
自訂收件匣項目元件
以下是我創建受概念啟發的通知項目的方法：
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
);
};
通知對象鍵
正如您在程式碼中看到的，我使用了以下通知鍵：
- 通知.tags
- notification.isRead
- notification.isArchived
- notification.to.firstName
- 通知.頭像
- 通知.主題
- notification.createdAt
- notification.body
- notification.primaryAction
- notification.primaryAction.label
- notification.secondaryAction
- notification.secondaryAction.label
notification.data 物件可以包含您的應用程式邏輯想要與使用者或訂閱者關聯的任何實用資訊。這種靈活的結構可讓您根據特定用例自訂通知，並向使用者提供更豐富、更多上下文資訊。
使用 notification.data 的範例：
-
電子商務訂單更新：
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 對象，您可以建立更多資訊豐富且可操作的通知，這些通知與您的應用程式的特定要求無縫整合。
這種靈活性使您能夠準確地向用戶提供他們所需的信息，從而增強他們的體驗以及通知系統的整體有效性。
使用鉤子進行通知管理
如果您仔細檢查了程式碼，您可能已經注意到使用四個關鍵鉤子來管理通知狀態：
- notification.unread()
- notification.read()
- notification.unarchive()
- notification.archive()
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:
- Mark notifications as read or unread
- Archive or unarchive notifications
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 建立類似概念的通知收件匣的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn