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?: Record<string, unknown>;
redirect?: Redirect;
};
これを武器に、Chakra UI を使用して (Tailwind クラスのラングリングは大変なので)、各通知アイテムをデザインしました。
Notion からインスピレーションを得た通知アイテムを作成する方法は次のとおりです:
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 の使用例:
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 (
<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 を使用して Notion のような通知受信箱を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
