如何使用 Chakra UI 和 Novu 构建类似概念的通知收件箱
- DDD原创
- 2024-10-03 06:20:02953浏览
TL;DR
In diesem kurzen Beitrag erfahren Sie, wie ich eine voll funktionsfähige Echtzeit-Benachrichtigungs-Posteingangskomponente neu erstellt habe, die die integrierte Benachrichtigungsfunktion von Notion nachbildet, indem ich nur Chakra UI für das Design und Novu für die Benachrichtigungen verwendet habe.
So sieht es aus:
Der Link zum Quellcode und der bereitgestellten Version dieser App befindet sich am Ende des Beitrags.
Als täglicher Notion-Benutzer schätze ich das Benachrichtigungserlebnis sehr und das ist einer der Gründe, warum ich ihre App so häufig nutze. Ich war neugierig – wie könnte ich einen Posteingang ähnlich dem eleganten Benachrichtigungssystem von Notion erstellen? Es stellt sich heraus, dass es dank Novus In-App-Benachrichtigungskomponente ganz einfach ist.
Novu hat kürzlich seine Full-Stack-Benachrichtigungskomponente auf den Markt gebracht – eine zustandsbehaftete, einbettbare React-Komponente oder ein Widget, das anpassbar und einsatzbereit ist.
So können Sie es in nur wenigen einfachen Schritten zu Ihrer React-App hinzufügen:
-
Installieren Sie das Novu-Paket
$ npm install @novu/react
-
Komponente importieren
import { Inbox } from "@novu/react"; -
Initialisieren Sie die Komponente in Ihrer App
function Novu() { return ( <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID" /> ); }
Das ist es! Sie verfügen jetzt über eine voll funktionsfähige In-App-Posteingangskomponente.
Aus der Box sieht es ziemlich toll aus:
Ich möchte nicht prahlen, aber der Posteingang von Novu ist zufällig auch der flexibelste und anpassbarste auf dem Markt. Schauen Sie sich an, wie Sie es stylen, und experimentieren Sie sogar selbst.
Wenn Sie sich für die Technologie dahinter interessieren, hat Novu-Mitbegründer Dima Grossman einen tollen Beitrag darüber geschrieben, wie und warum sie es entwickelt haben.
Gestalten Sie Ihren Posteingang wie Notion
Möchten Sie, dass Ihr Posteingang wie das Benachrichtigungsfeld von Notion aussieht? Kein Problem! Sie können Novus Benachrichtigungen ganz einfach umschließen und anpassen, um sie an die klare, minimalistische Ästhetik von Notion anzupassen.
Wie ich es gemacht habe
Anstatt nur die Inbox-Komponente von @novu/react zu importieren, habe ich die Komponenten „Benachrichtigung“ und „Benachrichtigungen“ eingefügt, um die vollständige Kontrolle über die Darstellung jedes Elements zu erhalten.
import { Inbox, Notification, Notifications } from "@novu/react";
Was ist in einer Benachrichtigung enthalten?
Bevor wir mit der Anpassung beginnen, sehen Sie hier die Struktur eines Benachrichtigungsobjekts:
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;
};
Damit ausgestattet, habe ich die Chakra-Benutzeroberfläche verwendet (weil das Ringen mit Tailwind-Klassen anstrengend ist), um jedes Benachrichtigungselement zu entwerfen.
Benutzerdefinierte Posteingangselementkomponente
So habe ich ein von Notion inspiriertes Benachrichtigungselement erstellt:
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
);
};
Benachrichtigungsobjektschlüssel
Wie Sie im Code sehen können, habe ich die folgenden Benachrichtigungsschlüssel verwendet:
- notification.tags
- notification.isRead
- notification.isArchived
- notification.to.firstName
- notification.avatar
- notification.subject
- notification.createdAt
- notification.body
- notification.primaryAction
- notification.primaryAction.label
- notification.secondaryAction
- notification.secondaryAction.label
Das notification.data-Objekt kann jede praktische Information enthalten, die Ihre Anwendungslogik einem Benutzer oder Abonnenten zuordnen möchte. Diese flexible Struktur ermöglicht es Ihnen, Benachrichtigungen an bestimmte Anwendungsfälle anzupassen und Ihren Benutzern umfassendere, kontextbezogenere Informationen bereitzustellen.
Beispiele für die Verwendung von notification.data:
-
E-Commerce-Bestellaktualisierungen:
notification.data = { orderId: "ORD-12345", status: "shipped", trackingNumber: "1Z999AA1234567890", estimatedDelivery: "2023-09-25" }; -
Social-Media-Interaktionen:
notification.data = { postId: "post-789", interactionType: "like", interactingUser: "johndoe", interactionTime: "2023-09-22T14:30:00Z" }; -
Finanztransaktionen:
notification.data = { transactionId: "TRX-98765", amount: 150.75, currency: "USD", merchantName: "Coffee Shop", category: "Food & Drink" };
Durch die Verwendung des notification.data-Objekts können Sie informativere und umsetzbarere Benachrichtigungen erstellen, die sich nahtlos in die spezifischen Anforderungen Ihrer Anwendung integrieren.
Diese Flexibilität ermöglicht es Ihnen, Benutzern genau die Informationen bereitzustellen, die sie benötigen, und steigert so ihr Erlebnis und die Gesamteffektivität Ihres Benachrichtigungssystems.
Verwendung von Hooks für die Benachrichtigungsverwaltung
Wenn Sie den Code genau untersucht haben, ist Ihnen möglicherweise die Verwendung von vier Schlüssel-Hooks zum Verwalten des Benachrichtigungsstatus aufgefallen:
- 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中文网其他相关文章！