{"id":30766094,"url":"https://github.com/keyvaluesoftwaresystems/siren-react-inbox","last_synced_at":"2025-09-04T18:59:39.827Z","repository":{"id":310124843,"uuid":"771338070","full_name":"KeyValueSoftwareSystems/siren-react-inbox","owner":"KeyValueSoftwareSystems","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-13T09:06:52.000Z","size":1389,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-15T23:19:04.382Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KeyValueSoftwareSystems.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-03-13T05:40:50.000Z","updated_at":"2025-07-31T11:08:15.000Z","dependencies_parsed_at":"2025-08-15T23:19:12.169Z","dependency_job_id":"dbb55cd3-0584-4096-b09f-064f58068945","html_url":"https://github.com/KeyValueSoftwareSystems/siren-react-inbox","commit_stats":null,"previous_names":["keyvaluesoftwaresystems/siren-react-inbox"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/KeyValueSoftwareSystems/siren-react-inbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-react-inbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-react-inbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-react-inbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-react-inbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeyValueSoftwareSystems","download_url":"https://codeload.github.com/KeyValueSoftwareSystems/siren-react-inbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-react-inbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273657096,"owners_count":25145003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-04T18:59:38.739Z","updated_at":"2025-09-04T18:59:39.780Z","avatar_url":"https://github.com/KeyValueSoftwareSystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Siren React Inbox\n\n## Overview\n\nThe `@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.\n\n## 1. Installation\n\nYou can install the react sdk from npm\n\n```bash\nnpm install @sirenapp/react-inbox\n```\n\nor from yarn\n\n```bash\nyarn add @sirenapp/react-inbox\n```\n\n#### Prerequisites\n\n- React v16.8+\n\n## 2. Configuration\n\n### 2.1 Initialization\n\nInitialize the sdk with user token and recipient id. Wrap the provider around your App's root.\n\n```js\nimport { SirenProvider } from \"@sirenapp/react-inbox\";\n\nconst config = {\n  userToken: \"your_user_token\",\n  recipientId: \"your_recipient_id\",\n};\n\n\u003cSirenProvider config={config}\u003e{/* Your app components */}\u003c/SirenProvider\u003e;\n```\n\n### 2.2 Configure notification inbox\n\nOnce the provider is configured, next step is to configure the notification inbox\n\nInbox is a paginated list view for displaying notifications.\n\n```js\nimport { SirenInbox } from \"@sirenapp/react-inbox\";\n\n\u003cSirenInbox /\u003e\n```\n\n#### Props for the notification inbox\n\nBelow are optional props available for the inbox component:\n\nProp | Description | Type | Default value |\n--- | --- | --- | --- |\ntheme | Object for custom themes |  Theme | {} |\ncustomStyles | Object for custom styling | CustomStyle | {} |\nloadMoreLabel | Text shown on the load more component | string | \"Load More\" |\nhideBadge | Toggle to hide or show the badge       |   boolean  |   false  |\ndarkMode | Toggle to enable dark mode |  boolean | false |\nhideTab  | Toggle to enable all and unread tabs  | false |\ntabProps | Props for customizing tab. \u003cbr\u003etabs - List of tab items. \u003cbr\u003e activeTab - Active tab index. | tabProps| { tabs: [\u003cbr\u003e{ key: 'all', title: 'All' },\u003cbr\u003e{ key: 'unread', title: 'Unread' }\u003cbr\u003e],activeTab: 0}  |\nitemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 |\nwindowViewOnly | Toggle to enable fit-to-screen window or modal view |  boolean | false |\nnotificationIcon | Option to use custom notification Icon |  JSX Element | null |\nheaderProps | Props for customizing the header.\u003cbr\u003e title - Title of the notification inbox\u003cbr\u003e hideHeader - Toggle to hide or show the header section.\u003cbr\u003e hideClearAll - Toggle to hide or show the clear all button.\u003cbr\u003e customHeader - Custom header component. | HeaderProps| { title: 'Notifications', \u003cbr\u003ehideHeader: false,\u003cbr\u003e hideClearAll: false, \u003cbr\u003ecustomHeader: null } |\ncardProps | Props for customizing the notification cards. \u003cbr\u003ehideDelete - Toggle to hide or show delete icon\u003cbr\u003e hideAvatar - Toggle to hide or show the avatar.\u003cbr\u003e hideMediaThumbnail - Toggle to hide or show thumbnail image\u003cbr\u003e disableAutoMarkAsRead - Toggle to disable or enable the markAsReadById functionality on card click.\u003cbr\u003e deleteIcon - Custom delete icon \u003cbr\u003e onAvatarClick - Custom click handler for avatar \u003cbr\u003e onMediaThumbnailClick - Custom click handler for media thumbnail | CardProps | { hideDelete: false,\u003cbr\u003e hideAvatar: false,\u003cbr\u003e disableAutoMarkAsRead: false, \u003cbr\u003e hideMediaThumbnail: false, \u003cbr\u003edeleteIcon: null, \u003cbr\u003e onAvatarClick: ()=\u003enull,\u003cbr\u003e onMediaThumbnailClick: () =\u003e null } |\ncustomCard | Function for rendering custom notification cards | (notification)=\u003e JSX Element | null |\nonCardClick | Custom click handler for notification cards | (notification)=\u003e void | ()=\u003enull |\nlistEmptyComponent | Custom component for empty notification list | JSX Element | null |\ncustomFooter | Custom footer component | JSX Element | null |\ncustomLoader | Custom loader component | JSX Element | null |\nloadMoreComponent | Custom load more component | JSX Element | null |\ncustomErrorWindow | Custom error window | JSX Element | null |\nonError | Callback for handling errors | (error:  SirenErrorType)=\u003e void | null |\n\n## 3. Customization\n\n### 3.1 Themes\n\nHere are the available theme options:\n\n```js\ntype Theme = {\n  dark: ThemeProps,\n  light: ThemeProps,\n};\n\ntype ThemeProps = {\n  colors?: {\n    primaryColor?: string,\n    textColor?: string,\n    neutralColor?: string,\n    borderColor?: string,\n    highlightedCardColor?: string,\n    dateColor?: string,\n    deleteIcon?: string,\n    timerIcon?: string,\n    clearAllIcon?: string,\n    infiniteLoader?: string,\n    windowShadowColor?: string,\n  },\n  badgeStyle?: {\n    color?: string,\n    textColor?: string,\n  },\n  windowHeader?: {\n    background?: string,\n    titleColor?: string,\n    headerActionColor?: string,\n  },\n  windowContainer?: {\n    background?: string,\n  },\n  customCard?: {\n    borderColor?: string,\n    background?: string,\n    titleColor?: string,\n    subtitleColor?: string,\n    descriptionColor?: string,\n  },\n  loadMoreButton?: {\n    color?: string,\n    background?: string,\n  },\n  tabs?: {\n    containerBackgroundColor?: string,\n    activeTabBackgroundColor?: string,\n    activeTabTextColor?: string,\n    inactiveTabTextColor?: string,\n    indicatorColor?: string,\n    borderColor?: string,\n    inactiveTabBackgroundColor?: string\n  };\n};\n```\n\n### 3.2 Style options\n\nHere are the custom style options for the notification inbox\n\nPlease note that the badgeStyle, window shadow and border props are only applicable for modal view\n\n```js\n type CustomStyle = {\n  notificationIcon?: {\n    size?: number,\n  },\n  window?: {\n    width?: DimensionValue,\n    borderRadius?: number,\n  },\n  windowHeader?: {\n    height?: DimensionValue,\n    titleFontWeight?:TextStyle[\"fontWeight\"],\n    titleSize?: number,\n    titlePadding?: number,\n    borderWidth?: string,\n  },\n  windowContainer?: {\n    padding?: number,\n    contentHeight?: DimensionValue,\n  },\n  customCard?: {\n    padding?: number,\n    borderWidth?: number,\n    avatarSize?: number,\n    titleFontWeight?: TextStyle[\"fontWeight\"],\n    titleSize?: number,\n    subtitleFontWeight?: TextStyle['fontWeight'],\n    subtitleSize?: number,\n    descriptionFontWeight?: TextStyle['fontWeight'],\n    descriptionSize?: number,\n    dateSize?: number,\n  },\n  loadMoreButton?: {\n    fontSize?: number,\n    fontWeight?: TextStyle[\"fontWeight\"]\n  },\n  badgeStyle?: {\n    size?: number,\n    textSize?: number,\n    top?: number,\n    right?: number\n  },\n  deleteIcon?:{\n    size?: number\n  },\n  timerIcon?:{\n    size?: number\n  },\n  clearAllIcon?:{\n    size?: number\n  },\n  tabs?: {\n    containerHeight?: number,\n    tabPadding?: number,\n    activeTabTextSize?: number,\n    inactiveTabTextSize?: number,\n    activeTabTextWeight?: TextStyle['fontWeight'],\n    inactiveTabTextWeight?: TextStyle['fontWeight'],\n    indicatorHeight?: number,\n    headingGap?: number,\n    borderWidth?: number,\n    borderRadius?: number,\n    paddingY?: number,\n    paddingX?: number,\n    tabContainerBorderWidth?: number\n  };\n}\n```\n\n#### CardProps\n\n```js\n    type CardProps = {\n      hideDelete?: boolean,\n      hideAvatar?: boolean,\n      hideMediaThumbnail?: boolean,\n      disableAutoMarkAsRead?: boolean,\n      deleteIcon?: JSX.Element,\n      onAvatarClick?: () =\u003e void,\n      onMediaThumbnailClick?: () =\u003e void,\n    };\n```\n\n#### InboxHeaderProps\n\n```js\n    type InboxHeaderProps = {\n      title?: string,\n      hideHeader?: boolean,\n      hideClearAll?: boolean,\n      customHeader?: JSX.Element | null,\n    };\n```\n\n## 4. Hooks\n\n`useSiren` is a hook that provides utility functions for modifying notifications.\n\n```js\nimport { useSiren } from \"@sirenapp/react-inbox\";\n\nfunction MyComponent() {\n  const {\n    markAsReadById,\n  } = useSiren();\n\n  function handleMarkAsRead(id) {\n    markAsReadById(id);\n  }\n\n  return {\n    /* Your component logic */\n  };\n}\n```\n\n### useSiren functions\n\nFunctions | Parameters | Type | Description |\n----------|------------|-------|------------|\nmarkAsReadByDate | options | { startDate: ISO date string, \u003cbr\u003eisRead?: boolean } |  Updates the read status of notifications. \u003cbr\u003estartDate- To set the read status of notifications up to the specified date. \u003cbr\u003e isRead- Filters notifications based on their read status. |\nmarkAsReadById | id | string | Set read status of a notification to true          |\ndeleteById |  id | string  | Delete a notification by id |\ndeleteByDate | options | { startDate: ISO date string, \u003cbr\u003eisRead?: boolean } | Delete all notifications until given start date. \u003cbr\u003estartDate- To specify the date until which notifications are deleted. \u003cbr\u003e isRead- Filters notifications based on their read status. |\nmarkAllAsViewed | untilDate | ISO date string |Sets the viewed status of notifications to true until the given date |\n\n\n## Example\n\nHere's a basic example to help you get started\n\n```js\nimport React from \"react\";\nimport { SirenInbox, SirenProvider } from \"@sirenapp/react-inbox\";\n\nfunction App(): React.JSX.Element {\n  const config = {\n    userToken: \"your_user_token\",\n    recipientId: \"your_recipient_id\",\n  };\n\n  return (\n    \u003cSirenProvider config={config}\u003e\n      \u003cMyContainer /\u003e\n    \u003c/SirenProvider\u003e\n  );\n}\n\nexport default App;\n\nexport function MyContainer(): React.JSX.Element {\n  return (\n    \u003cdiv\u003e\n      \u003cSirenInbox\n        headerProps={\n          title: \"Notifications\",\n          hideHeader: false\n        }\n        darkMode={false}\n        cardProps={{\n          hideDelete: false,\n          hideAvatar: false,\n          disableAutoMarkAsRead: false,\n          deleteIcon: null,\n          onAvatarClick: () =\u003e null,\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Fsiren-react-inbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyvaluesoftwaresystems%2Fsiren-react-inbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Fsiren-react-inbox/lists"}