Props

interface InboxProps = {
  //Brand Override
  brand?: Brand;

  //Icon Class Name
  className?: string;

  // Default Icon to use if no Icon is present in Message
  defaultIcon?: false | string;

  // Placement of the Bell relative to the Inbox
  placement?: "top" | "left" | "right" | "bottom";

  // Render Props for Custom Rendering
  renderTabs?: React.FunctionComponent<{
    currentTab?: ITab;
    tabs?: ITab[];
  }>;
  renderFooter?: React.FunctionComponent;
  renderHeader?: React.FunctionComponent;
  renderIcon?: React.FunctionComponent<{
    unreadMessageCount?: number;
  }>;
  renderMessage?: React.FunctionComponent<IMessage>;
  renderNoMessages?: React.FunctionComponent;

  // Tab Overrides
  tabs?: Array<ITab>;
  theme?: ThemeObject;

  // Inbox Title Override
  title?: string;
  trigger?: "click" | "hover";
}

Theme

interface ITheme {
  container?: React.CSSProperties;
  footer?: React.CSSProperties;
  header?: React.CSSProperties;
  icon?: React.CSSProperties;
  messageList?: {
    container?: React.CSSProperties;
    message?: {
      actions?: {
        container?: React.CSSProperties;
        details?: React.CSSProperties;
        dismiss?: React.CSSProperties;
      }
      body?: React.CSSProperties;
      container?: React.CSSProperties;
      icon?: React.CSSProperties;
      title?: React.CSSProperties;
      unreadIndicator?: React.CSSProperties;
    }
  };
  tabList?: {
    container?: React.CSSProperties;
    tab?: React.CSSProperties;
  };
  root?: React.CSSProperties;
}

Theme example

const props = {
  "isOpen": true,
  "title": "Custom Title"
}

const theme = {
  "container": {
    "background": "green"
  },
  "header": {
    "background": "pink"
  },
  "messageList": {
    "container": {
      "background": "pink"
    }
  },
  "tabList": {
    "tab": {
      "color": "white",
      "background": "blue",
      "&.active": {
        "color": "red",
        "borderBottom": "2px dashed red"
      }
    }
  }
}

Render Props

Render Props are a react concept that allows you to supply your own react components instead of the ones built for this library. Inbox supplies render props for most sub-components.

interface ITheme {
  container?: React.CSSProperties;
  footer?: React.CSSProperties;
  header?: React.CSSProperties;
  icon?: React.CSSProperties;
  messageList?: {
    container?: React.CSSProperties;
    message?: {
      actions?: {
        container?: React.CSSProperties;
        details?: React.CSSProperties;
        dismiss?: React.CSSProperties;
      }
      body?: React.CSSProperties;
      container?: React.CSSProperties;
      icon?: React.CSSProperties;
      title?: React.CSSProperties;
      unreadIndicator?: React.CSSProperties;
    }
  };
  tabList?: {
    container?: React.CSSProperties;
    tab?: React.CSSProperties;
  };
  root?: React.CSSProperties;
}

Render props example

import React from "react";

export const CustomContainer: React.FunctionComponent = (props) => {
  return <>{props.children}</>;
};

export const CustomHeader: React.FunctionComponent = () => {
  return <h1>Custom Header</h1>;
};

export const CustomFooter: React.FunctionComponent = () => {
  return <div>Custom Footer</div>;
};

export const CustomIcon: React.FunctionComponent = () => {
  return <div>Icon</div>;
};

export const CustomTabs: React.FunctionComponent = () => {
  return <div>No Tabs For You</div>;
};

export const CustomNoMessages: React.FunctionComponent = () => {
  return <div>No Messages</div>;
};

const props = {
  "isOpen": true,
  "title": "Custom Title",
  "theme": {
    "root": {
      "width": 300,
      "padding": 10,
      "background": "#ccc",
      "borderRadius": 0
    }
  }
}

Hooks

useInbox is a hook that you can import and use to interact with Inbox without having to use any of the react components. Think of it as a headless Inbox.

Hooks example

import React, { useEffect } from "react";
import { useInbox, ITab } from "@trycourier/react-inbox";

export const MyCustomInbox: React.FunctionComponent = () => {
  const {
    currentTab,
    fetchMessages,
    isLoading,
    messages = [],
    unreadMessageCount,
    getUnreadMessageCount,
    setCurrentTab,
    tabs,
  } = useInbox();

  const handleOnClickTab = (newTab: ITab) => (event: React.MouseEvent) => {
    event.preventDefault();
    setCurrentTab(newTab);
  };

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

  return (
    <div
      style={{
        backgroundColor: "pink",
        padding: "10px",
        borderRadius: "12px",
        width: 250,
        height: 200,
      }}
    >
      <h3>My Inbox</h3>
      <div>Unread Messages: {unreadMessageCount}</div>
      <div>Current Tab: {currentTab?.id}</div>
      {tabs?.map((tab) => (
        <button key={tab.id} onClick={handleOnClickTab(tab)}>
          {tab.label}
        </button>
      ))}
      {!isLoading &&
        messages?.map((message) => (
          <div key={message.messageId}>
            <div>MessageId: {message.messageId}</div>
            <div>Title: {message.title}</div>
          </div>
        ))}
      {isLoading && messages?.length === 0 && <div>Loading</div>}
    </div>
  );
};