Skip to content

Commit 4a73f30

Browse files
thushar-kvthushar-kv
authored
docs: Update README
1 parent 708fe7a commit 4a73f30

File tree

1 file changed

+64
-111
lines changed

1 file changed

+64
-111
lines changed

‎README.md‎

Lines changed: 64 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,32 @@
1-
<div>
2-
<img width="50px" style="float:left;padding-right:12px;" src="https://app.dev.sirenapp.io/assets/Siren-b2f89b52.svg" >
3-
<H1>Siren React Inbox</H1>
4-
</div>
51

6-
## Table of Contents
7-
8-
<!-- MarkdownTOC -->
9-
10-
- [Overview](#overview)
11-
- [Quick Start Guide](#quick-start-guide)
12-
- [Install SDK](#1-install-sdk)
13-
- [Siren Provider](#2-siren-provider)
14-
- [Siren Inbox](#3-siren-inbox)
15-
- [useSiren](#4-usesiren)
16-
- [Error Codes](#5-error-codes)
17-
- [Complete Code Example](#complete-code-example)
18-
- [I want to know more!](#i-want-to-know-more)
19-
20-
<!-- /MarkdownTOC -->
2+
<H1>Siren React Inbox</H1>
213

224
<a name="introduction"></a>
235

246
## Overview
257

26-
The @siren/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.
8+
The `@siren/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.
279

28-
## Quick Start Guide
10+
### 1. Installation
2911

30-
### 1. Install SDK
12+
You can install the react sdk from npm
3113

32-
To install the @siren/react-inbox sdk, you can use npm or yarn.
14+
```bash
15+
npm @siren/react-inbox
16+
```
17+
or from yarn
18+
19+
```bash
20+
yarn @siren/react-inbox
21+
```
3322

3423
#### Prerequisites
3524

3625
- React v16.8+
3726

38-
#### Steps
39-
40-
1. Under your app's root directory, install @siren/react-inbox.
41-
42-
```
43-
npm install @siren/react-inbox
44-
```
45-
46-
### 2. Siren Provider
47-
48-
The SirenProvider initializes the Siren sdk with the specified configuration, which contains important parameters like the user token and recipient ID. Wrap the SirenProvider around your App's root.
27+
### 2. Configuration
28+
#### 2.1 Initialization
29+
Initialize the sdk with user token and recipient id. Wrap the provider around your App's root.
4930

5031
```js
5132
import { SirenProvider } from "@siren/react-inbox";
@@ -58,66 +39,48 @@ const config = {
5839
<SirenProvider config={config}>{/* Your app components */}</SirenProvider>;
5940
```
6041

61-
The config is a prop for the SirenProvider component is authenticate and initialize sdk.
42+
#### 2.2 Configure notification inbox
43+
Once the provider is configured, next step is to configure the notification inbox
6244

63-
```js
64-
type config = {
65-
userToken: string,
66-
recipientId: string,
67-
};
68-
```
69-
70-
### 3. Siren Inbox
71-
72-
SirenInbox is a paginated list view with notification Icon for displaying notifications.
45+
Inbox is a paginated list view for displaying notifications.
7346

7447
```js
7548
import { SirenInbox } from '@siren/react-inbox';
7649

77-
<SirenInbox
78-
theme={customTheme}
79-
title="Notifications"
80-
windowViewOnly={false}
81-
hideHeader={false}
82-
darkMode={true}
83-
noOfNotificationsPerFetch={10}
84-
cardProps={hideAvatar: false}
85-
onError={(error) => console.log(error)}
86-
/>
50+
<SirenInbox />
8751

8852
```
8953

90-
#### Siren Inbox Props
54+
#### Props for the notification inbox
9155

92-
Given below are all props of inbox component.
56+
Below are optional props available for the inbox component:
9357

9458
Prop | Description | Type | Default value |
9559
--- | --- | --- | --- |
96-
theme | Theme object for custom styling | Theme | {} |
60+
theme | Object for custom themes | Theme | {} |
9761
title | Title of the notification inbox | string | "Notifications" |
98-
loadMoreLabel | Text to be shown on the bottom load more component | string | "Load More"
99-
hideHeader | Flag to hide or show the header | boolean | false |
100-
hideClearAll | Flag to hide or show the clear all button | boolean | false |
101-
darkMode | Flag to enable dark mode | boolean | false |
62+
loadMoreLabel | Text shown on the load more component | string | "Load More"
63+
hideHeader | Toggle to hide or show the header section | boolean | false |
64+
hideClearAll | Toggle to hide or show the clear all button | boolean | false |
65+
darkMode | Toggle to enable dark mode | boolean | false |
10266
itemsPerFetch | Number of notifications fetch per api request (have a max cap of 50) | number | 20 |
103-
windowViewOnly | Flag to enable window view | boolean | false |
67+
windowViewOnly | Toggle to enable fit-to-screen window or modal view | boolean | false |
10468
notificationIcon | Option to use custom notification Icon | JSX Element | null |
105-
noOfNotificationsPerFetch | Number of notifications to fetch per page | number | 10 |
106-
cardProps | Props for customizing the notification cards | CardProps | null |
107-
customNotificationCard | Custom function for rendering notification cards | (notification)=> JSX Element | null |
108-
onNotificationCardClick | Props for customizing the notification cards | (notification)=> void | ()=>null |
109-
listEmptyComponent | Custom component to display when the notification list is empty | JSX Element | null |
69+
cardProps | Props for customizing the notification cards | { hideAvatar: boolean } | { hideAvatar: false } |
70+
customNotificationCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
71+
onNotificationCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
72+
listEmptyComponent | Custom component for empty notification list | JSX Element | null |
11073
customHeader | Custom header component | JSX Element | null |
11174
customFooter | Custom footer component | JSX Element | null |
112-
customLoader | Custom Loader component | JSX Element | null |
113-
loadMoreComponent | Custom Load More component | JSX Element | null |
75+
customLoader | Custom loader component | JSX Element | null |
76+
loadMoreComponent | Custom load more component | JSX Element | null |
11477
customErrorWindow | Custom error window | JSX Element | null |
115-
11678
onError | Callback for handling errors | (error: SirenErrorType)=> void | null |
11779

118-
#### Theming options
80+
### 3. Customization
81+
#### 3.1 Themes
11982

120-
Customizable UI option for notification inbox, with dark and light theme options.
83+
Here are the available theme options:
12184

12285
```js
12386
type Theme = {
@@ -170,9 +133,11 @@ type ThemeProps = {
170133
}
171134
};
172135
```
173-
#### Style options
136+
#### 3.2 Style options
174137

175-
Customize the styles for siren inbox
138+
Here are the custom style options for the notification inbox
139+
140+
Please note that the badgeStyle, window shadow and border props are only applicable for modal view
176141

177142
```js
178143
type CustomStyle = {
@@ -223,10 +188,10 @@ Customize the styles for siren inbox
223188
}
224189
}
225190
```
226-
Note : badStyle, window shadow and border props are only applicable only for modal view
227-
### 4. useSiren
228191

229-
This is a hook that provides utility functions for modifying notifications.
192+
### 4. Hooks
193+
194+
useSiren is a hook that provides utility functions for modifying notifications.
230195

231196
```js
232197
import { useSiren } from "@siren/react-inbox";
@@ -268,36 +233,34 @@ function MyComponent() {
268233

269234
#### useSiren functions
270235

271-
| Function name | Parameters type | Description |
272-
| ----------------------------- | ----------------- | ----------------------------------------------------------- |
273-
| markNotificationsAsReadByDate | startDate: string | Set all notification read status to true until given date |
274-
| markAsRead | id: string | Set read status of a specific notification to true |
275-
| deleteNotification | id: string | Delete a specific notification by id |
276-
| deleteNotificationsByDate | startDate: string | Delete all notifications until given date |
277-
| markNotificationsAsViewed | startDate: string | Set all notification viewed status to true until given date |
236+
| Functions | Parameters | Type | Description |
237+
| ----------------------------- | ----------------- |---------| ----------------------------------------------------------- |
238+
| markNotificationsAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date. |
239+
| markAsRead | id | string | Set read status of a notification to true |
240+
| deleteNotification | id | string | Delete a notification by id |
241+
| deleteNotificationsByDate | startDate | ISO date string| Delete all notifications until given date |
242+
| markNotificationsAsViewed | startDate | ISO date string | Sets the viewed status of notifications to true until the given date |
278243

279244
### 5. Error codes
280245

281246
Given below are all possible error codes thrown by sdk.
282247

283-
| Error code | Message | Description |
284-
| ------------------------- | ------------------------------------- | ------------------------------------------------------ |
285-
| INVALID_TOKEN | Invalid token | Token passed in provider is invalid |
286-
| INVALID_RECIPIENT_ID | Invalid recipient id | Recipient id in provider is invalid |
287-
| TOKEN_VERIFICATION_FAILED | This operation requires a valid token | Failed to verify token and initialize sdk |
288-
| INVALID_ERROR_FUNCTION | Invalid error function | Error function is invalid |
289-
| GENERIC_API_ERROR | Api error | Failed to call a internal api |
290-
| SIREN_OBJECT_NOT_FOUND | Siren Object Not found | Was failed to initialize sdk, Siren object not created |
291-
| MISSING_PARAMETER | Missing Parameter | A parameter is missing in function call |
248+
| Error code | Message | Description |
249+
| ------------------------- | ------------------------------------- | ------------------------------------------------------------------|
250+
| INVALID_TOKEN | Invalid token | The token passed in the provider is invalid |
251+
| INVALID_RECIPIENT_ID | Invalid recipient id | The recipient id passed in the provider is invalid |
252+
| TOKEN_VERIFICATION_FAILED | This operation requires a valid token | Verification of the given tokens has failed |
253+
| GENERIC_API_ERROR | Api error | Occurrence of an unexpected api error |
254+
| SIREN_OBJECT_NOT_FOUND | Siren Object Not found | Attempting to invoke the functions outside the siren inbox context|
255+
| MISSING_PARAMETER | Missing Parameter | The required parameter is missing |
292256

293-
### Complete Code Example
257+
### Example
294258

295-
Here's a runnable code example that covers everything in this quick start guide.
259+
Here's a basic example to help you get started.
296260

297261
```js
298262

299263
import React from 'react';
300-
import {SafeAreaView} from 'react';
301264
import {SirenInbox,SirenProvider} from '@siren/react-inbox';
302265

303266
function App(): React.JSX.Element {
@@ -316,26 +279,16 @@ function App(): React.JSX.Element {
316279

317280
export default App;
318281

319-
function MyContainer(): React.JSX.Element {
282+
export function MyContainer(): React.JSX.Element {
320283

321284
return (
322-
<SafeAreaView style={{flex: 1}}>
285+
<div>
323286
<SirenInbox
324287
title="Notifications"
325288
hideHeader={false}
326289
darkMode={false}
327290
cardProps={{hideAvatar: false}}
328291
/>
329-
</SafeAreaView>
292+
</div>
330293
);
331-
}
332-
333-
export default MyContainer;
334-
335-
```
336-
337-
### I want to know more!
338-
339-
No worries, here are some links that you will find useful:
340-
341-
- **[Advanced React Guide](https://react.dev/learn/installation)**
294+
}

0 commit comments

Comments
 (0)