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 #

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

export const Example = () => {
  return (
    <Notification notificationId="my-awesome-notification-id" />
  );
};
Vanilla JavaScript:
<cord-notification notification-id="my-awesome-notification-id"></cord-notification>
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.
React:
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);
          });
        }}
      />
  );
};
Vanilla JavaScript:
<cord-notification notification-id="my-awesome-notification-id"></cord-notification>
<script>
  const notification = document.querySelector('[notification-id="my-awesome-notification-id"]');
  notification.addEventListener('cord-notification:click', (e) => {
      const [event, { destinationUrl } ] = e.detail;
      event.preventDefault();
      // Run any logic you need
      myAsyncCallback().then(() => {
        // When you're done, resume navigation!
        window.location.assign(destinationUrl);
      });
  });
</script>
                
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.


Ask Cordy