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 的通知面板嗎？沒問題！您可以輕鬆包裝和自訂 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?: Record<string, unknown>;
redirect?: Redirect;
};
有了這個，我使用 Chakra UI（因為爭論 Tailwind 類很累人）來設計每個通知項目。
以下是我創建受概念啟發的通知項目的方法：
const InboxItem = ({ notification }: { notification: Notification }) => {
const [isHovered, setIsHovered] = useState(false);
const notificationType = notification.tags?.[0];
return (
<Box
p={2}
bg="white"
position="relative"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Flex align="flex-start" position="relative">
<VStack spacing={0} position="absolute" top="0" right="0">
{isHovered && (
<Box bg="white" display="flex" gap={1}>
{notification.isRead ? (
<IconButton
aria-label="Mark as unread"
icon={<PiNotificationFill />}
onClick={() => notification.unread()}
size="sm"
variant="ghost"
/>
) : (
<IconButton
aria-label="Mark as read"
icon={<FaRegCheckSquare />}
onClick={() => notification.read()}
size="sm"
variant="ghost"
/>
)}
{notification.isArchived ? (
<IconButton
aria-label="Unarchive"
icon={<PiNotificationFill />}
onClick={() => notification.unarchive()}
size="sm"
variant="ghost"
/>
) : (
<IconButton
aria-label="Archive"
icon={<FiArchive />}
onClick={() => notification.archive()}
size="sm"
variant="ghost"
/>
)}
</Box>
)}
</VStack>
<Box
position="relative"
display="flex"
alignItems="center"
mr="8px"
height="26px"
>
{!notification.isRead && (
<Box>
<Box width="8px" height="8px" bg="blue.500" borderRadius="full" />
</Box>
)}
{notification.avatar !== undefined && (
<Avatar
width="24px"
height="24px"
marginLeft="8px"
name={notification.to.firstName}
src={notification.avatar || undefined}
/>
)}
</Box>
<VStack align="start" spacing="8px" flex="1" mt="3px">
<Flex justify="space-between" width="100%">
<Text fontSize="14px" color="gray.800" fontWeight="600">
{notification.subject}
</Text>
<Text fontSize="xs" color="gray.400">
{formatTime(notification.createdAt)}
</Text>
</Flex>
{notificationType !== "Mention" &&
notificationType !== "Comment" &&
notificationType !== "Invite" && (
<Text fontSize="14px" color="gray.800">
{notification.body}
</Text>
)}
{(notificationType === "Mention" ||
notificationType === "Comment") && (
<Button
variant="ghost"
size="sm"
leftIcon={<GrDocumentText />}
_hover={{ bg: "rgba(0, 0, 0, 0.03)" }}
pl="2px"
pr="5px"
height="25px"
>
<Text
fontSize="14px"
color="gray.800"
fontWeight="500"
backgroundImage="linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)"
backgroundRepeat="repeat-x"
backgroundSize="100% 1px"
backgroundPosition="0 100%"
mr="-2px"
>
{notification.body}
</Text>
</Button>
)}
{notificationType === "Invite" && (
<Button
variant="outline"
size="md"
_hover={{ bg: "rgba(0, 0, 0, 0.03)" }}
padding="12px"
height="50px"
fontSize="14px"
width="100%"
borderRadius="8px"
textAlign="left"
border="1px solid rgba(227, 226, 224, 0.5)"
justifyContent="space-between"
>
{notification.body}
</Button>
)}
{notificationType === "Comment" && (
<Box>
<Text fontSize="12px" color="rgb(120, 119, 116)" fontWeight="400">
John Doe
</Text>
<Text fontSize="14px" color="rgb(55, 53, 47)" fontWeight="400">
This is a notification Comment made by John Doe and posted on
the page Top Secret Project
</Text>
</Box>
)}
<HStack spacing={3}>
{notification.primaryAction && (
<Button
variant="outline"
size="xs"
colorScheme="gray"
borderRadius="md"
borderColor="gray.300"
_hover={{ bg: "gray.100" }}
paddingRight="8px"
paddingLeft="8px"
lineHeight="26px"
height="26px"
>
{notification.primaryAction.label}
</Button>
)}
{notification.secondaryAction && (
<Button
variant="ghost"
size="xs"
colorScheme="gray"
borderRadius="md"
borderColor="gray.300"
_hover={{ bg: "gray.100" }}
paddingRight="8px"
paddingLeft="8px"
lineHeight="26px"
height="26px"
>
{notification.secondaryAction.label}
</Button>
)}
</HStack>
</VStack>
</Flex>
</Box>
);
};
正如您在程式碼中看到的，我使用了以下通知鍵：
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 對象，您可以建立更多資訊豐富且可操作的通知，這些通知與您的應用程式的特定要求無縫整合。
這種靈活性使您能夠準確地向用戶提供他們所需的信息，從而增強他們的體驗以及通知系統的整體有效性。
如果您仔細檢查了程式碼，您可能已經注意到使用四個關鍵鉤子來管理通知狀態：
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 (
<Flex
width="100vw"
height="100vh"
bg="gray.100"
overflow="hidden"
justifyContent="center"
alignItems="center"
style={{
fontFamily:
'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"',
}}
>
<Box
width="80%"
height="80%"
bg="white"
borderRadius="lg"
boxShadow="xl"
overflow="hidden"
>
<Flex height="100%">
{/* Sidebar */}
<Box
width="240px"
bg="rgb(247, 247, 245)"
padding="8px"
display="flex"
flexDirection="column"
borderColor={borderColor}
borderRightWidth="1px"
>
<Flex alignItems="center" mb="4px" padding="0.6rem">
<Text
fontSize="1.25rem"
fontWeight="bold"
color="rgb(55, 53, 47)"
>
<Icon
as={NotionIcon}
sx={{
width: "20px",
height: "20px",
marginRight: "8px",
display: "inline-block",
}}
/>{" "}
Workspace
</Text>
<IconButton
aria-label="User Settings"
icon={<FiChevronDown />}
variant="ghost"
size="sm"
/>
</Flex>
<VStack align="stretch" spacing={1} mb="15px">
<SidebarItem icon={FiSearch} label="Search" />
<SidebarItem icon={FiHome} label="Home" />
<SidebarItem icon={FiInbox} label="Inbox" isActive={isInboxOpen} onClick={toggleInbox} />
<SidebarItem icon={FiSettings} label="Settings & members" />
</VStack>
<Text fontSize="xs" fontWeight="bold" color="gray.500" mb={2}>
Favorites
</Text>
<VStack align="stretch" spacing={1} mb="15px">
<SidebarItem icon={FiHome} label="Teamspaces" />
<SidebarItem icon={BsFillFileTextFill} label="Shared" />
</VStack>
<Text fontSize="xs" fontWeight="bold" color="gray.500" mb={2}>
Private
</Text>
<VStack align="stretch" spacing={1} mb="15px">
<SidebarItem icon={AiOutlineCalendar} label="Calendar" />
<SidebarItem icon={FaUserFriends} label="Templates" />
<SidebarItem icon={BsTrash} label="Trash" />
</VStack>
</Box>
// ... (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 < 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();
}
}
Now that we have covered all the pieces, here is the complete code:
'use client'
import React, { useState } from 'react';
import {
Box,
Flex,
Text,
IconButton,
VStack,
Avatar,
HStack,
Link,
Icon,
useColorModeValue,
Button,
Heading,
} from "@chakra-ui/react";
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";
import { Inbox, Notification, Notifications } from "@novu/react";
import { NotionIcon } from "../icons/Notion";
const subscriberId = process.env.NEXT_PUBLIC_SUBSCRIBERID;
const applicationIdentifier = process.env.NEXT_PUBLIC_NOVU_CLIENT_APP_ID;
const AppContainer = () => {
const borderColor = useColorModeValue("gray.200", "gray.700");
const [isInboxOpen, setIsInboxOpen] = useState(true);
const toggleInbox = () => {
setIsInboxOpen(!isInboxOpen);
};
return (
{/* Sidebar */}
Favorites
Private
{/* Main Content Area */}
{/* Injected Content Behind the Inbox */}
Notion Inbox Notification Theme
Checkout the deployed version now
{/* Inbox Popover */}
{isInboxOpen && (
(
)}
);
};
// Sidebar Item Component
interface SidebarItemProps {
icon: React.ElementType;
label: string;
isActive?: boolean;
external?: boolean;
onClick?: () => void;
}
const SidebarItem: React.FC = ({
icon,
label,
isActive = false,
external = false,
onClick,
}) => {
return (
{label}
);
};
const InboxItem = ({ notification }: { notification: Notification }) => {
const [isHovered, setIsHovered] = useState(false);
const notificationType = notification.tags?.[0];
return (
<Box
p={2}
bg="white"
position="relative"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Flex align="flex-start" position="relative">
<VStack spacing={0} position="absolute" top="0" right="0">
{isHovered && (
<Box bg="white" display="flex" gap={1}>
{notification.isRead ? (
<IconButton
aria-label="Mark as unread"
icon={<PiNotificationFill />}
onClick={() => notification.unread()}
size="sm"
variant="ghost"
/>
) : (
<IconButton
aria-label="Mark as read"
icon={<FaRegCheckSquare />}
onClick={() => notification.read()}
size="sm"
variant="ghost"
/>
)}
{notification.isArchived ? (
<IconButton
aria-label="Unarchive"
icon={<PiNotificationFill />}
onClick={() => notification.unarchive()}
size="sm"
variant="ghost"
/>
) : (
<IconButton
aria-label="Archive"
icon={<FiArchive />}
onClick={() => notification.archive()}
size="sm"
variant="ghost"
/>
)}
</Box>
)}
</VStack>
<Box
position="relative"
display="flex"
alignItems="center"
mr="8px"
height="26px"
>
{!notification.isRead && (
<Box>
<Box width="8px" height="8px" bg="blue.500" borderRadius="full" />
</Box>
)}
{notification.avatar !== undefined && (
<Avatar
width="24px"
height="24px"
marginLeft="8px"
name={notification.to.firstName}
src={notification.avatar || undefined}
/>
)}
</Box>
<VStack align="start" spacing="8px" flex="1" mt="3px">
<Flex justify="space-between" width="100%">
<Text fontSize="14px" color="gray.800" fontWeight="600">
{notification.subject}
</Text>
<Text fontSize="xs" color="gray.400">
{formatTime(notification.createdAt)}
</Text>
</Flex>
{notificationType !== "Mention" &&
notificationType !== "Comment" &&
notificationType !== "Invite" && (
<Text fontSize="14px" color="gray.800">
{notification.body}
</Text>
)}
{(notificationType === "Mention" ||
notificationType === "Comment") && (
<Button
variant="ghost"
size="sm"
leftIcon={<GrDocumentText />}
_hover={{ bg: "rgba(0, 0, 0, 0.03)" }}
pl="2px"
pr="5px"
height="25px"
>
<Text
fontSize="14px"
color="gray.800"
fontWeight="500"
backgroundImage="linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)"
backgroundRepeat="repeat-x"
backgroundSize="100% 1px"
backgroundPosition="0 100%"
mr="-2px"
>
{notification.body}
</Text>
</Button>
)}
{notificationType === "Invite" && (
<Button
variant="outline"
size="md"
_hover={{ bg: "rgba(0, 0, 0, 0.03)" }}
padding="12px"
height="50px"
fontSize="14px"
width="100%"
borderRadius="8px"
textAlign="left"
border="1px solid rgba(227, 226, 224, 0.5)"
justifyContent="space-between"
>
{notification.body}
</Button>
)}
{notificationType === "Comment" && (
<Box>
<Text fontSize="12px" color="rgb(120, 119, 116)" fontWeight="400">
John Doe
</Text>
<Text fontSize="14px" color="rgb(55, 53, 47)" fontWeight="400">
This is a notification Comment made by John Doe and posted on
the page Top Secret Project
</Text>
</Box>
)}
<HStack spacing={3}>
{notification.primaryAction && (
<Button
variant="outline"
size="xs"
colorScheme="gray"
borderRadius="md"
borderColor="gray.300"
_hover={{ bg: "gray.100" }}
paddingRight="8px"
paddingLeft="8px"
lineHeight="26px"
height="26px"
>
{notification.primaryAction.label}
</Button>
)}
{notification.secondaryAction && (
<Button
variant="ghost"
size="xs"
colorScheme="gray"
borderRadius="md"
borderColor="gray.300"
_hover={{ bg: "gray.100" }}
paddingRight="8px"
paddingLeft="8px"
lineHeight="26px"
height="26px"
>
{notification.secondaryAction.label}
</Button>
)}
</HStack>
</VStack>
</Flex>
</Box>
);
};
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中文網其他相關文章！
