Skip to content

[CLNP-5460 ]Update samples/README to address prop change info #1251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 19, 2024
Merged

[CLNP-5460 ]Update samples/README to address prop change info #1251

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions samples/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Try your [message item on StackBlitz](https://stackblitz.com/edit/sendbird-uikit

### Message list params

The **queries.messageListParams** is an `instance` prop in the **channel** component which you can use to retrieve a list of messages by specifying the properties of `MessageListParams`.
The **messageListQueryParams** is an `instance` prop in the `<GroupChannel/>` component which you can use to retrieve a list of messages by specifying the properties of `MessageListParams`.

Try your [message list params on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-list-params-aora77).

Expand All @@ -123,7 +123,7 @@ const queryParams = useMemo(() => ({

### Message params

The **onBeforeSendUserMessage**, **onBeforeSendFileMessage**, and **onBeforeUpdateUserMessage** are `callback function` props in the **channel** component. The first two execute additional operations for a user message and a file message respectively; the corresponding modified messages are returned through the **text** and the **file** arguments respectively. The **onBeforeUpdateUserMessage** executes additional operations for a user message before updating it.
The **onBeforeSendUserMessage**, **onBeforeSendFileMessage**, and **onBeforeUpdateUserMessage** are `callback function` props in the **<GroupChannel />** component. The first two execute additional operations for a user message and a file message respectively; the corresponding modified messages are returned through the **text** and the **file** arguments respectively. The **onBeforeUpdateUserMessage** executes additional operations for a user message before updating it.

Try your [message params on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-params-4yemw4)

Expand Down Expand Up @@ -151,7 +151,7 @@ Find out more about `UserMessageCreateParams`, `UserMessageUpdateParams` and `Fi

### Chat header

The **renderChatHeader** is a `ReactElement` prop in the **channel** component which you can use to customize the header of `channel` by setting a function. This prop provides two arguments: **channel** and **user**. The channel refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user.
The **renderChatHeader** is a `ReactElement` prop in the **<GroupChannel />** component which you can use to customize the header of `channel` by setting a function. This prop provides two arguments: **channel** and **user**. The channel refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user.

Try your [chat header on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-chat-header-xjewem)

Expand All @@ -167,7 +167,7 @@ Try your [chat header on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-

### Message input

The **renderMessageInput** is a `ReactElement` prop in the **Channel** component which allows you to customize the message input by setting a function. This prop provides three arguments: **channel**, **user**, and **disabled**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user. The **disabled** refers to whether to enable the message input box or not.
The **renderMessageInput** is a `ReactElement` prop in the **<GroupChannel />** component which allows you to customize the message input by setting a function. This prop provides three arguments: **channel**, **user**, and **disabled**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user. The **disabled** refers to whether to enable the message input box or not.

Try your [message input on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-input-mnw6qv)

Expand All @@ -183,7 +183,7 @@ Try your [message input on StackBlitz](https://stackblitz.com/edit/sendbird-uiki

### Channel preview item

The **renderChannelPreview** is a `ReactElement` prop in the **ChannelList** component which allows you to customize channel preview by setting a function. This prop provides two arguments: **channel** and **onLeaveChannel**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **onLeaveChannel** has a callback function as an argument which can be implemented with custom code for events related to the corresponding user action.
The **renderChannelPreview** is a `ReactElement` prop in the **<GroupChannelList />** component which allows you to customize channel preview by setting a function. This prop provides two arguments: **channel** and **onLeaveChannel**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **onLeaveChannel** has a callback function as an argument which can be implemented with custom code for events related to the corresponding user action.

Try your [channel preview item on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-preview-uekro8)

Expand All @@ -210,7 +210,7 @@ const CustomizedChannelPreviewItem = (props) => {

### Channel list query

The **queries.channelListQuery** is an `instance` prop in the **ChannelList** component which filters channels by using its options.
The **channelListQueryParams** is an `instance` prop in the **<GroupChannelList />** component which filters channels by using its options.

Try your [channel list query item on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-list-queries-5ppaf9)

Expand Down