TL;DR
Dans ce court article, vous découvrirez comment j'ai recréé un composant de boîte de réception de notification en temps réel entièrement fonctionnel qui reproduit la capacité de notification intégrée de Notion en utilisant uniquement l'interface utilisateur Chakra pour la conception et Novu pour les notifications.
Voici à quoi ça ressemble :
Le lien vers le code source et la version déployée de cette application se trouvent à la fin du post.
En tant qu'utilisateur quotidien de Notion, j'apprécie vraiment leur expérience de notifications, et c'est en grande partie pourquoi j'utilise si souvent leur application. J'étais curieux : comment puis-je recréer une boîte de réception similaire au système de notification élégant de Notion ? Il s'avère que c'est assez simple, grâce au composant de notification intégré à l'application.
Novu a récemment lancé son composant de notification full-stack : un composant ou un widget React avec état et intégrable, personnalisable et prêt à l'emploi.
Voici comment l'ajouter à votre application React en quelques étapes simples :
Installer le package Novu
$ npm install @novu/react
Importer le composant
import { Inbox } from "@novu/react";
Initialisez le composant dans votre application
function Novu() {
return (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriberId="YOUR_SUBSCRIBER_ID"
/>
);
}
C'est ça ! Vous disposez désormais d’un composant de boîte de réception intégré à l’application entièrement fonctionnel.
Hors de la boîte, ça a l'air plutôt génial :
Je ne veux pas me vanter, mais la boîte de réception de Novu s'avère également être la plus flexible et la plus personnalisable du marché. Découvrez comment le styliser et expérimentez même par vous-même.
Si vous êtes intéressé par la technologie qui se cache derrière, Dima Grossman, co-fondatrice de Novu, a écrit un excellent article expliquant comment et pourquoi ils l'ont construit.
Vous voulez que votre boîte de réception ressemble au panneau de notification de Notion ? Pas de problème ! Vous pouvez facilement envelopper et personnaliser les notifications de Novu pour les adapter à l’esthétique épurée et minimale de Notion.
Comment j'ai fait
Au lieu de simplement importer le composant Inbox depuis @novu/react, j'ai introduit les composants Notification et Notifications pour un contrôle total sur le rendu de chaque élément.
import { Inbox, Notification, Notifications } from "@novu/react";
Avant de commencer la personnalisation, voici la structure d'un objet de notification :
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;
};
Armé de cela, j'ai utilisé Chakra UI (car lutter contre les classes Tailwind est épuisant) pour concevoir chaque élément de notification.
Voici comment j'ai créé un élément de notification inspiré de 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>
);
};
Comme vous pouvez le voir dans le code, j'ai utilisé les touches de notification suivantes :
L'objet notification.data peut contenir toute information pratique que votre logique d'application souhaite associer à un utilisateur ou un abonné. Cette structure flexible vous permet d'adapter les notifications à des cas d'utilisation spécifiques et de fournir des informations plus riches et plus contextuelles à vos utilisateurs.
Exemples d'utilisation de notification.data :
Mises à jour des commandes e-commerce :
notification.data = {
orderId: "ORD-12345",
status: "shipped",
trackingNumber: "1Z999AA1234567890",
estimatedDelivery: "2023-09-25"
};
Interactions sur les réseaux sociaux :
notification.data = {
postId: "post-789",
interactionType: "like",
interactingUser: "johndoe",
interactionTime: "2023-09-22T14:30:00Z"
};
Opérations financières :
notification.data = {
transactionId: "TRX-98765",
amount: 150.75,
currency: "USD",
merchantName: "Coffee Shop",
category: "Food & Drink"
};
En utilisant l'objet notification.data, vous pouvez créer des notifications plus informatives et exploitables qui s'intègrent parfaitement aux exigences spécifiques de votre application.
Cette flexibilité vous permet de fournir aux utilisateurs précisément les informations dont ils ont besoin, améliorant ainsi leur expérience et l'efficacité globale de votre système de notification.
Si vous avez examiné le code de près, vous avez peut-être remarqué l'utilisation de quatre crochets clés pour gérer les états de notification :
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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Introduction aux cordes
L'inscription Bitcoin va-t-elle disparaître ?
Comment utiliser la fonction abdominaux
Quels sont les outils de classement des mots clés SEO ?
Échec de la routine d'initialisation de la bibliothèque de liens dynamiques
Solution à l'erreur de socket 10054
qu'est-ce que la plage Python
Supprimer les fichiers Internet temporaires
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
