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

Did this answer your question?