Notification

Display a single notification

Live Demo

When to use #

This component renders a single notification. It's best used to build a custom notification experience if the notification list component isn't suitable. In combination with the notifications REST API to send notifications, and the notifications data JS API to retrieve them, you can build a completely custom notifications experience.

How to use #

import { Notification } from "@cord-sdk/react";

export const Example = () => {
  return (
    <Notification notificationId="my-awesome-notification-id" />
  );
};

Copy

Example onClick: async callback #

You can run async code in the onClick callback. To do so, you will have to prevent the default navigation that happens when users click on the notification, await your logic and then resume navigation.

import { Notification } from "@cord-sdk/react";

export const Example = () => {
  return (
      <Notification
        notificationId="my-awesome-notification-id"
        onClick={(event, { destinationUrl }) => {
          // Don't navigate to another page.
          event.preventDefault();
          // Run any logic you need
          myAsyncCallback().then(() => {
            // When you're done, resume navigation!
            window.location.assign(destinationUrl);
          });
        }}
      />
  );
};

Copy

Properties #

notificationId #

required

string

The ID of the notification to render.

onClick #

optional

function

Callback invoked when a user clicks a notification.

Want to customize the components further?

Head to our CSS customization guide

Not finding the answer you need? Ask our Developer Community

Ask Cordy