sendbird-uikit-react

React based UI kit based on sendbird javascript SDK

Getting Started

With Sendbird UI Kit React, we export these components: (See src/index.jsx)

• SendBirdProvider - The context provider for SDK component

• withSendBird - HOC to access SendBirdProvider context

• useSendbirdStateContext - Hook to access SendBirdProvider context

• sendBirdSelectors - A bunch of useful selectors that can be used along with withSendbird or useSendbirdStateContext

• Channel - A UI Component where conversations happen

• ChannelList - A ChannelList UI component

• ChannelSettings - A component to handle the settings of a given channel

• MessageSearch - To search for a message from a Channel

• OpenChannel - A UI Component where open channel conversations happen

• OpenChannelSettings - A component to handle the settings of a given channel

• App - is a full fledged app(group channel) component made by combining the above components so that you dont have to combine all the above components by hand. Also it can be used as an example for composing components to build a chat UI

Note 1: Dont forget to import the stylesheet from the repo too Note 2: Name of some components are different from the directories they are in(example -> Channel component is from Conversation component). Please keep that in mind

Prerequisites

You need to install:

• nodejs 12.xx LTS https://nodejs.org/en/download/
• npm 6.8 or above

We tried development on Mac OS / Linux systems. You might encounter problems in running npm run build in Windows machines

Development

We use storybook for development and rollup for building bundled JS file Make sure you have nodejs and npm installed and follow these steps:

Make a copy of env.example and save it as .env
Inside the .env file, set your appId  `STORYBOOK_APP_ID=appId (no quotes)`
npm install
npm run storybook

npm run generate-component generates a UI component skeleton in src/ui

• By default, storybook opens in http://localhost:6006/
• Smart Components such as ChannelList, Channel, ChannelSetting, App can be found under OTHERS
• Dumb components such as inputs, buttons etc can be found under OTHERS/UI Components in storybook sidebar
• Overridden storybook configs can be found in: ./storybook

Build

We use rollupJS for building the production bundle script that you want to use inside your applications.

We have both esm and commonjs output

npm run build

The bundled JS code can be found in ./release The CSS is in ./release/dist/index.css

Running the tests

We have implemented tests for dumb ui components only. Technologies used: Jest, Enzyme and react-dom/test-utils

npm run test

Lint

npm run lint

• .eslintrc.json lints ts files and .eslintrc.js lints js files

Typescript

• We are trying to progressively move our source code to typescript - which means older JS code and newly written TS code will coxist while we migrate older JS code to TS
• .eslintrc.json lints ts files and .eslintrc.js lints js files
• Type definition file can be src/index.d.ts which will be copied to /release directory

Creating/exporting new components

1. Define your component inside './src'
2. Add the following line to './src/index.js' export NewComponent from './src/location/of/NewComponent';
3. Add the following line to './rollup.config.js' input NewComponent: 'src/location/of/NewComponent',

---

Sendbird UIKit for React samples

Sendbird UIKit for React is a development kit with an user interface that enables an easy and fast integration of standard chat features into new or existing client apps. Here are three UIKit samples for React in the submodules.

• simple-react-app is a chat app which is comprised of UIKit’s most essential components.
• composed-react-app is a chat app which contains various smart components.
• custom-react-app is a chat app which contains customizable sample codes for Message, ChannelPreview, and UserList.

More about Sendbird UIKit for React

Find out more about Sendbird UIKit for React at UIKit for React doc. If you need any help in resolving any issues or have questions, visit our community.

UIKit components and ways to customize

These samples are here to help you better understand UIKit for React by going over the core components and ways to customize. On each core component sample, there is an attached CodeSandbox link in which you can see the sample codes and alter them to see how the changes are rendered.

Before getting started

This section shows you what you need for testing Sendbird UIKit sample app for React sample app.

Requirements

The minimum requirements for UIKit for React are:

• React 16.8.0+
• React DOM 16.8.0+
• Sendbird Chat SDK for JavaScript 3.0.115+
• css-vars-ponyfill 2.3.2
• date-fns 2.16.1

Implement Chat with App component

The App component is a collection of all UIKit components you need to implement chat. This is included in all core component samples, so be sure to set your own APP_ID, USER_ID, and NICKNAME in const.js in each to customize your sample. On the CodeSandbox link, you will see that the props of the App component refer to use the values of the correspondings of const.js for initialization.

Try setting your own by downloading the Sendbird sample.

import { App as SendbirdApp } from 'sendbird-uikit'

Import components to customize UIKit

Here is a list of the essential components that you need to import before you start customizing chat. Note that the names of the components are changed as shown in the code below.

Try importing components on CodeSandbox.

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

Referring to CodeSandbox

Each CodeSandbox sample has App.js and CustomizedApp.js which operate based on the imported const.js. CodeSandbox is a code editor that provides an instant live preview. The preview has two buttons placed at the top center. If you click the left button, you will see unaltered App.js. If you click the right button, you will see the customized component from CustomizedApp.js, and any changes you make on them applied and rendered on the live preview.

If you would like to get a deeper understanding of how CodeSandbox works, refer to CustomizedMessageItems, CustomizedHeader, CustomizedMessageInput, and CustomizedChannelPreviewItem which you can find on corresponding CodeSandbox samples.

Getting Started

This section explains what you need to know before testing the sample app.

Message item

The renderChatItem is a ReactElement prop in the Channel component which you can use to customize message by setting a function. This prop provides three arguments: message, onUpdateMessage, and onDeleteMessage. The message represents an already sent or received message of an BaseMessage object; onUpdateMessage and onDeleteMessage are callback functions which you can implement with custom code for events related to the corresponding user actions.

Try your message item on CodeSandbox.

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

Note: You can try making your own customized message item by using <CustomizedMessageItem /> on the CodeSandbox sample.

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.

Try your message list params on CodeSandbox.

Note: On CodeSandbox’s preview, only the messages you sent will be displayed.

// Pass arguments in JSON data input format to the query instance.
<Channel
    queries={{
        messageListParams: {
            senderUserIds: [USER_ID],
            prevResultSize: 30,
            includeReplies: false,
            includeReactions: false
        }
   }}
>

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.

Try your message params on CodeSandbox

Note: On the CodeSandbox’s preview, you can send or update a message in highlight.

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

In order to complete an operation you intend to carry out with each function, you should return UserMessageParams and FileMessageParams objects.

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

Find out more about UserMessageParams and FileMessageParams on the API reference of Sendbird Chat SDK for JavaScript.

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.

Try your chat header on CodeSandbox

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

Note: You can try making your own customized chat header item by using <CustomizedHeader /> on the CodeSandbox sample.

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.

Try your message input on CodeSandbox

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

Note: You can try making your own customized message input item by using <CustomizedMessageInput /> on the CodeSandbox sample.

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.

Try your channel preview item on CodeSandbox

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

CustomizedChannelPreviewItem.js

You can make your own customized channel preview item component in this file. You can use the onLeaveChannel function in the component.

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

Note: You can try making your own customized channel preview item by using <CustomizedMessageItem /> and using the onLeaveChannel function in the component on the CodeSandbox sample.

Channel list query

The queries.channelListQuery is an instance prop in the ChannelList component which filters channels by using its options.

Try your channel list query item on CodeSandbox

Note: On the CodeSandbox’s preview, the empty channels that you see means that the channels are successfully created and there are no messages sent by users.

// Pass arguments in JSON data input format to the query instance.
<ChannelList
    queries={{
        channelListQuery: {
            includeEmpty: true,
            limit: 50,
            order: "chronological"
        },
        applicationUserListQuery: {
            limit: 50,
        }
    }}
>

Find out more about ChannelListQuery and ApplicationUserListQuery on the API reference of Sendbird Chat SDK for JavaScript.

Channel params

The onBeforeCreateChannel is a prop of the ChannelList component which can be implemented with custom code for events related to the corresponding user actions.

Try your channel param on CodeSandbox

Note: you can create a channel using GroupChannelParams.

<ChannelList
    onBeforeCreateChannel={handleOnBeforeCreateChannel}
>

You can get an array of selectedUsers in a function argument. In order to complete an operation you intend to carry out with the function, you should return a GroupchannelParams object after specifying its properties.

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;
}

Find out more about GroupChannelParams on the API reference of Sendbird Chat SDK for JavaScript.