Siren React Inbox

Overview

The @sirenapp/react-inbox sdk is a comprehensive and customizable React UI kit for displaying and managing notifications. This documentation provides comprehensive information on how to install, configure, and use the sdk effectively.

1. Installation

You can install the react sdk from npm

npm install @sirenapp/react-inbox

or from yarn

yarn add @sirenapp/react-inbox

Prerequisites

• React v16.8+

2. Configuration

2.1 Initialization

Initialize the sdk with user token and recipient id. Wrap the provider around your App's root.

import { SirenProvider } from "@sirenapp/react-inbox";

const config = {
  userToken: "your_user_token",
  recipientId: "your_recipient_id",
};

<SirenProvider config={config}>{/* Your app components */}</SirenProvider>;

2.2 Configure notification inbox

Once the provider is configured, next step is to configure the notification inbox

Inbox is a paginated list view for displaying notifications.

import { SirenInbox } from "@sirenapp/react-inbox";

<SirenInbox />

Props for the notification inbox

Below are optional props available for the inbox component:

Prop | Description | Type | Default value | --- | --- | --- | --- | theme | Object for custom themes | Theme | {} | loadMoreLabel | Text shown on the load more component | string | "Load More" | hideBadge | Toggle to hide or show the badge | boolean | false | darkMode | Toggle to enable dark mode | boolean | false | itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 | windowViewOnly | Toggle to enable fit-to-screen window or modal view | boolean | false | notificationIcon | Option to use custom notification Icon | JSX Element | null | inboxHeaderProps | Props for customizing the header. title - Title of the notification inbox hideHeader - Toggle to hide or show the header section. hideClearAll - Toggle to hide or show the clear all button. customHeader - Custom header component. | InboxHeaderProps| { title: 'Notifications', hideHeader: false, hideClearAll: false, customHeader: null } | cardProps | Props for customizing the notification cards. hideDelete - Toggle to hide or show delete icon hideAvatar - Toggle to hide or show the avatar. disableAutoMarkAsRead - Toggle to disable or enable the markAsRead functionality on card click. onAvatarClick - Custom click handler for avatar | CardProps | { hideDelete: false, hideAvatar: false, disableAutoMarkAsRead: false, onAvatarClick: ()=>null } | customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null | onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null | listEmptyComponent | Custom component for empty notification list | JSX Element | null | customFooter | Custom footer component | JSX Element | null | customLoader | Custom loader component | JSX Element | null | loadMoreComponent | Custom load more component | JSX Element | null | customErrorWindow | Custom error window | JSX Element | null | onError | Callback for handling errors | (error: SirenErrorType)=> void | null |

3. Customization

3.1 Themes

Here are the available theme options:

type Theme = {
  dark: ThemeProps,
  light: ThemeProps,
};

type ThemeProps = {
  notificationIcon?: {
    size?: number,
  },
  colors?: {
    primaryColor?: string,
    textColor?: string,
    neutralColor?: string,
    borderColor?: string,
    highlightedCardColor?: string,
    dateColor?: string,
    deleteIcon?: string,
    timerIcon?: string,
    clearAllIcon?: string,
    infiniteLoader?: string,
    windowShadowColor?: string,
  },
  badgeStyle?: {
    color?: string,
    textColor?: string,
  },
  window?: {
    borderColor?: string,
  },
  windowHeader?: {
    background?: string,
    titleColor?: string,
    headerActionColor?: string,
    borderColor?: string,
  },
  windowContainer?: {
    background?: string,
  },
  notificationCard?: {
    borderColor?: string,
    background?: string,
    titleColor?: string,
    descriptionColor?: string,
  },
  loadMoreButton: {
    color?: string,
    background?: string,
  },
};

3.2 Style options

Here are the custom style options for the notification inbox

Please note that the badgeStyle, window shadow and border props are only applicable for modal view

 type CustomStyle = {
  notificationIcon?: {
    size?: number,
  },
  window?: {
    width?: DimensionValue,
    borderRadius?: number,
  },
  windowHeader?: {
    height?: DimensionValue,
    titleFontWeight?:TextStyle["fontWeight"],
    titleSize?: number,
    titlePadding?: number,
  },
  windowContainer?: {
    padding?: number,
    contentHeight?: DimensionValue,
  },
  notificationCard?: {
    padding?: number,
    borderWidth?: number,
    avatarSize?: number,
    titleFontWeight?: TextStyle["fontWeight"],
    titleSize?: number,
    descriptionSize?: number,
    dateSize?: number,
  },
  loadMoreButton?: {
    fontSize?: number,
    fontWeight?: TextStyle["fontWeight"]
  },
  badgeStyle?: {
    size?: number,
    textSize?: number,
    top?: number;
    left?: number
  },
  deleteIcon?:{
    size?: number
  }
  dateIcon?:{
    size?: number
  }
  clearAllIcon?:{
    size?: number
  }
}

CardProps

    type CardProps = {
      hideDelete?: boolean;
      hideAvatar?: boolean,
      disableAutoMarkAsRead?: boolean,
      onAvatarClick?: () => void,
    };

InboxHeaderProps

    type InboxHeaderProps = {
      title?: string;
      hideHeader?: boolean,
      hideClearAll?: boolean,
      customHeader?: JSX.Element | null,
    };

4. Hooks

useSiren is a hook that provides utility functions for modifying notifications.

import { useSiren } from "@sirenapp/react-inbox";

function MyComponent() {
  const {
    markAsRead,
    deleteNotification,
    markAllNotificationsAsReadByDate,
    clearAllNotificationByDate,
    markNotificationsAsViewed,
  } = useSiren();

  function handleMarkAsRead(id) {
    markAsRead(id);
  }

  function handleDeleteNotification(id) {
    deleteNotification(id);
  }

  function handleMarkAllNotificationsAsReadByDate(untilDate) {
    markNotificationsAsReadByDate(untilDate);
  }

  function handleClearAllNotificationByDate(untilDate) {
    deleteNotificationsByDate(untilDate);
  }

  function handleMarkNotificationsAsViewed(untilDate) {
    markNotificationsAsViewed(untilDate);
  }

  return {
    /* Your component logic */
  };
}

useSiren functions

Functions | Parameters | Type | Description | ----------|------------|-------|------------| markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date | markAsRead | id | string | Set read status of a notification to true | deleteNotification | id | string | Delete a notification by id | deleteNotificationsByDate | startDate | ISO date string | Delete all notifications until given date | markNotificationsAsViewed | startDate | ISO date string |Sets the viewed status of notifications to true until the given date |

5. Error codes

Given below are all possible error codes thrown by sdk.

Error code | Description | ------------------------- | ------------------------------------------------------------------| INVALID_TOKEN | The token passed in the provider is invalid | INVALID_RECIPIENT_ID | The recipient id passed in the provider is invalid | TOKEN_VERIFICATION_FAILED | Verification of the given tokens has failed | GENERIC_API_ERROR | Occurrence of an unexpected api error | OUTSIDE_SIREN_CONTEXT | Attempting to invoke the functions outside the siren inbox context| MISSING_PARAMETER | The required parameter is missing |

Example

Here's a basic example to help you get started

import React from "react";
import { SirenInbox, SirenProvider } from "@sirenapp/react-inbox";

function App(): React.JSX.Element {
  const config = {
    userToken: "your_user_token",
    recipientId: "your_recipient_id",
  };

  return (
    <SirenProvider config={config}>
      <MyContainer />
    </SirenProvider>
  );
}

export default App;

export function MyContainer(): React.JSX.Element {
  return (
    <div>
      <SirenInbox
        inboxHeaderProps={
          title: "Notifications",
          hideHeader: false
        }
        darkMode={false}
        cardProps={{
          hideDelete: false,
          hideAvatar: false,
          disableAutoMarkAsRead: false,
        }}
      />
    </div>
  );
}