README
What is Inbox?
Inbox is a react component that you can add to your application show your users a list of recent messages they have received over a push
channel.
Upcoming Features:
- Browser Web Push
- Presence
How does @trycourier/react-inbox work?
The react inbox requires a backend to pull messages. This is all done through the CourierProvider
and requires an account at Courier. To set up Courier Inbox you will need to install Courier from the integrations page. Courier Push integration
After installing the integration you will be provided with a Client Key
As of right now, we will fetch all messages sent to any push
channel and display them in the inbox
.
Client Install
yarn add @trycourier/react-inbox
Courier Provider
In order for the Inbox
component to be placed in the dom you will need to use the CourierProvider
. This will handle context and give us access Courier's backend API.
Check here for more information on this concept.
//App.js
import { Inbox, CourierProvider } from "@trycourier/react-inbox";
/*
alternatively you can access from its own package
import { CourierProvider } from "@trycourier/react-provider";
*/
function App() {
return (
<CourierProvider userId={yourUserId} clientKey={yourClientKey}>
<Inbox />
</CourierProvider>
);
}
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
renderBell?: React.FunctionComponent<{
className?: string;
isOpen?: boolean;
onClick?: (event: React.MouseEvent) => void;
onMouseEnter?: (event: React.MouseEvent) => void;
}>;
renderFooter?: React.FunctionComponent;
renderHeader?: React.FunctionComponent;
renderIcon?: React.FunctionComponent<{
hasUnreadMessages: boolean;
}>;
renderMessage?: React.FunctionComponent;
// Tab Overrides
tabs?: Array<ITab>;
theme?: ThemeObject;
// Inbox Title Override
title?: string;
trigger?: "click" | "hover";
}
Theme
interface ITheme {
footer?: React.CSSProperties;
header?: React.CSSProperties;
icon?: React.CSSProperties;
container?: 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;
}