So erstellen Sie mit Chakra UI und Novu einen konzeptähnlichen Benachrichtigungsposteingang

TL;DR

In this short post, you will learn about how I recreated a fully functional, real-time, notification inbox component that replicates Notion’s built-in notifications capability by using only Chakra UI for the design and Novu for the notifications.

This is how it looks:

The link to the source code and the deployed version of this app are at the end of the post.

As a daily Notion user, I really appreciate their notifications experience, and it’s a huge part of why I use their app so heavily. I was curious—how could I recreate an inbox similar to Notion's sleek notification system? Turns out, it's quite straightforward, thanks to Novu's in-app notification component.

Novu recently launched their full-stack notification component—a stateful, embeddable React component or widget that's customizable and ready to go.

Here’s how you can add it to your React app in just a few simple steps:

1. Install the Novu package
   

   $ npm install @novu/react
   

2. Import the component
   

   import { Inbox } from "@novu/react";
   

3. Initialize the component in your app
   

   function Novu() {
     return (
       <Inbox
         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
         subscriberId="YOUR_SUBSCRIBER_ID"
       />
     );
   }
   

That’s it! You’ve now got a fully functional in-app inbox component.

Out of the box, it looks pretty awesome:

Not to brag, but Novu’s Inbox also happens to be the most flexible and customizable out there. Check out how to style it, and even experiment for yourself.

If you're interested in the tech behind it, Novu's Co-Founder Dima Grossman wrote a great post on how and why they built it.

---

Styling your Inbox like Notion

Want your inbox to look like Notion’s notification panel? Not a problem! You can easily wrap and customize Novu’s notifications to fit Notion’s clean, minimal aesthetic.

How I did it

Instead of just importing the Inbox component from @novu/react, I brought in the Notification and Notifications components for full control over rendering each item.

import { Inbox, Notification, Notifications } from "@novu/react";

What’s inside a notification?

Before we start customizing, here's the structure of a notification object:

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;
};

Armed with this, I used Chakra UI (because wrangling Tailwind classes is exhausting) to design each notification item.

---

Custom inbox item component

Here’s how I created a Notion-inspired notification item:

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
    );
};

Notification object keys

As you can see in the code, I utilized the following notification keys:

• 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

The notification.data object can contain any practical piece of information that your application logic would like to associate with a user or subscriber. This flexible structure allows you to tailor notifications to specific use cases and provide richer, more contextual information to your users.

Examples of using notification.data:

1. E-commerce order updates:
   

   notification.data = {
     orderId: "ORD-12345",
     status: "shipped",
     trackingNumber: "1Z999AA1234567890",
     estimatedDelivery: "2023-09-25"
   };
   

2. Social media interactions:
   

   notification.data = {
     postId: "post-789",
     interactionType: "like",
     interactingUser: "johndoe",
     interactionTime: "2023-09-22T14:30:00Z"
   };
   

3. Financial transactions:
   

   notification.data = {
     transactionId: "TRX-98765",
     amount: 150.75,
     currency: "USD",
     merchantName: "Coffee Shop",
     category: "Food & Drink"
   };
   

By utilizing the notification.data object, you can create more informative and actionable notifications that seamlessly integrate with your application's specific requirements.

This flexibility allows you to provide users with precisely the information they need, enhancing their experience and the overall effectiveness of your notification system.

Using hooks for notification management

If you've examined the code closely, you may have noticed the use of four key hooks to manage notification states:

• 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.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Chakra UI und Novu einen konzeptähnlichen Benachrichtigungsposteingang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!