@trycourier/react-hooks

• Overview
• Types
• Events

Overview

@trycourier/react-hooks exist as a separate package so that you can build your own interface using our api and state management without having to install all the dependencies that @trycourier/react-inbox or other react-dom based packages include.

This also enables using this package with react-native in a much simpler way.

Types

const inbox: IInbox & IInboxActions = useInbox();

interface ITab {
  filters: {
    isRead?: boolean;
  };
  label: string;
  id: string;
}

interface IMessage {
  unread?: number;
  messageId: string;
  created: string;
  title: string;
  body: string;
  blocks?: Array<IActionBlock | ITextBlock>;
  icon?: string;
  read?: boolean;
  data?: {
    clickAction: string;
  };
  trackingIds?: {
    archiveTrackingId: string;
    clickTrackingId: string;
    deliveredTrackingId: string;
    readTrackingId: string;
    unreadTrackingId: string;
  };
}

interface IInboxActions {
  init: (inbox: IInbox) => void;
  toggleInbox: (isOpen?: boolean) => void;
  setView: (view: "messages" | "preferences") => void;
  setCurrentTab: (newTab: ITab) => void;
  fetchMessages: (params?: IFetchMessagesParams) => void;
  getMessageCount: (params?: IGetMessagesParams) => void;
  markMessageRead: (messageId: string, trackingId: string) => Promise<void>;
  markMessageUnread: (messageId: string, trackingId: string) => Promise<void>;
  markAllAsRead: () => void;
}

interface IInbox {
  isOpen?: boolean;
  tabs?: ITab[];
  currentTab?: ITab;
  isLoading?: boolean;
  messages?: Array<IMessage>;
  startCursor?: string;
  unreadMessageCount?: number;
  view?: "messages" | "preferences";
}

Events

Inbox

Inbox supports a few different events that can be triggered on the client side.

These events are:

• Delivered
• Read
• Unread
• Click
• Archive

Some of these events are called automatically.

• Delivered events are called automatically inside the Courier Provider when a message has been delivered through the websocket
• Click events are triggered using our click through tracking links. Click events will also automatically trigger a read event.

Manually calling events

You can call events manually by importing the corresponding function from the react hook.

For Example:

import { CourierProvider } from "@trycourier/react-provider";
import { useInbox } from "@trycourier/react-hooks";

const MyInbox = () => {
  const inbox = useInbox();

  useEffect(() => {
    inbox.fetchMessages();
  }, []);

  const handleReadMessage = (message) => (event) => {
    event.preventDefault();
    inbox.markMessageRead(
      message.messageId,
      message.trackingIds.readTrackingId
    );
  };

  const handleUnreadMessage = (message) => (event) => {
    event.preventDefault();
    inbox.markMessageUnread(
      message.messageId,
      message.trackingIds.unreadTrackingId
    );
  };

  const handleArchiveMessage = (message) => (event) => {
    event.preventDefault();
    inbox.markMessageArchived(
      message.messageId,
      message.trackingIds.archiveTrackingId
    );
  };

  return (
    <Container>
      {inbox.messsages.map((message) => {
        return (
          <Message>
            {message.read ? (
              <>
                <button onClick={handleUnreadMessage(message)}>
                  Unread Me
                </button>
                <button onClick={handleArchiveMessage(message)}>
                  Archive Me
                </button>
              </>
            ) : (
              <button onClick={handleReadMessage(message)}>Read Me</button>
            )}
          </Message>
        );
      })}
    </Container>
  );
};

const MyApp = () => {
  return (
    <CourierProvider userId="MY_USER_ID" clientKey="MY_CLIENT_KEY">
      <MyInbox />
    </CourierProvider>
  );
};