Find the code samples for UIKIT react in the sub directories

• simple-react-app - Most simple usecase using component
• composed-react-app - A chat application combining various smart components
• custom-react-app - An example with custom Message, ChannelPreview and UserList examples

Find the docs at: https://docs.sendbird.com/javascript/ui_kit_getting_started

These samples show how to use and customize Sendbird UIKit. They are integrated in codesandbox.
You have to set your own APP_ID, USER_ID, and NICKNAME in const.js in each example to make them work.
And there are some commented links in the samples. They will be usefull for reference.

You can see how to use App component in this sample.

You can see a basic format for customizing in this sample.

Note: Imported as different name to origin

import {
  Channel as SBConversation,
  ChannelList as SBChannelList,
  ChannelSettings as SBChannelSettings,
} from 'sendbird-uikit'

You can see how to customize message item of the Channel component in this sample.

If you enable the toggle button, you can see that the message item customization is applied.

You can see a renderChatItem prop of the Channel(SBConversation) component.
Set a function returning customized message item. You can get these function parameters.

<Channel
  renderChatItem={({
    message,
    onDeleteMessage,
    onUpdateMessage,
    onResendMessage,
    emojiContainer,
  }) => {
    <CustomizedMessageItem />
  }}
>

Make your own customized message item components here.

You can see how to customize message list of the Channel component in this sample.

If you enable the toggle button, you can see that the message list customization are applied.
You will see only the messages that you sent

You can see a queries prop of the Channel(SBConversation) component.

<Channel
  queries={{
    messageListParams: {
      senderUserIds: [USER_ID],
      prevResultSize: 30,
      includeReplies: false,
      includeReactions: false
    }
  }}
>

Use object json type input, don't create sendbird message list params instance

MessageListParams

• SendBird API Reference
• GitHub SendBird.d.ts

You can see how to customize message params through props of the Channel component in this sample.

If you enable the toggle button, you can send or update as a highlighted message.

You can see the used props.

<Channel
  onBeforeSendUserMessage={(text) => {}}
  onBeforeSendFileMessage={(file) => {}}
  onBeforeUpdateUserMessage={handleUpdateUserMessage}
>

You should return UserMessageParams and FileMessageParams instance in each functions.

const handleUpdateUserMessage = (text) => {
  const userMessageParams = new sdk.UserMessageParams();
  userMessageParams.message = text;
  return userMessageParams;
}

UserMessageParams

• SendBird API Reference
• GitHub SendBird.d.ts

FileMessageParams

• SendBird API Reference
• GitHub SendBird.d.ts

If the customType of message is highlight, show background color with yellow.

You can see how to customize chat header of the Channel component in this sample.

If you enable the toggle button, you can see that the chat header customization is applied.

You can see a renderChatHeader prop of the Channel(SBConversation) component.
Set a function returning customized chat header. You can get channel and user instance as function parameters.

<Channel
  renderChatHeader={({ channel, user }) => (
    <CustomizedHeader />
  )}
>

Make your own customized chat header component here.

You can see how to customize message input of the Channel component in this sample.

If you enable the toggle button, you can see that the message input customization is applied.

You can see a renderMessageInput prop of the Channel(SBConversation) component.
Set a function returning customized message input. You can get channel, user, and disabled values as function parameters.

<Channel
  renderMessageInput={({ channel, user, disabled }) => (
    <CustomizedMessageInput />
  )}
>

Make your own customized message input component here.

You can see how to customize channel preview item of the ChannelList component in this sample.

If you enable the toggle button, you can see that the channel preview item customization is applied.

You can see a renderChannelPreview prop of the ChannelList(SBChannelList) component.
Set a function returning customized channel preview item. You can get channel and onLeaveChannel as function parameters.

<ChannelList
  renderChannelPreview={({ channel, onLeaveChannel }) => (
    <CustomizedChannelPreviewItem />
  )}
>

Make your own customized channel preview item component here.
You can use the onLeaveChannel function in the component.

function CustomizedChannelPreviewItem(props) {
  const { channel, onLeaveChannel } = props;

  ...
  onLeaveChannel(channel);
}

You can see how to customize channel list query of the ChannelList component in this sample.

If you enable the toggle button, you can see that the channel list customization is applied. You will ses the empty channels(means created channel but it has no message sent by user).

You can see a queries prop of the ChannelList(SBChannelList) component.

<ChannelList
  queries={{
    channelListQuery: {
      includeEmpty: true,
      limit: 50,
      order: "chronological"
    },
    applicationUserListQuery: {
      limit: 50,
    }
  }}
>

Use object json type input, don't create sendbird query

ChannelListQuery

• SendBird API Reference
• GitHub SendBird.d.ts

ApplicationUserListQuery

• SendBird API Reference
• GitHub SendBird.d.ts

You can see how to customize channel preview item of the ChannelList component in this sample.

If you enable the toggle button, you can create channel using GroupChannelParams.

You can see this prop.

<ChannelList
  onBeforeCreateChannel={handleOnBeforeCreateChannel}
>

You can get array of selectredUsers as a function parameter.
And you should return GroupChannelParams instance in the function.

const handleOnBeforeCreateChannel = (selectedUsers) => {
  const channelParams = new sdk.GroupChannelParams();
    channelParams.addUserIds(selectedUsers);
    channelParams.name = "Hello SendBird!!";
    channelParams.overUrl = null;
    channelParams.coverImage = null;
    channelParams.customType = HIGHLIGHT;
    return channelParams;
}

GroupChannelParams

• SendBird API Reference
• GitHub SendBird.d.ts

If the customType of channel is highlight, show background color with yellow.