JavaScript
UIKit Getting Started

UIKit for React

Sendbird UIKit for React is a development kit that enables fast and easy integration of standard chat features into your React client apps. From the overall theme to individual styles such as colors and fonts, components can be fully customized to create an in-app chat experience unique to your brand identity. This library isn't designed to work with other frameworks such as Vue or Angular.

Note: Currently, UIKit for React supports group channels only.

ThemeLight


Benefits

  • Easy installation
  • Fully-featured chat with a minimal amount of code
  • Customizable components, events, and views
  • Customizable user list to enable chat among specified users

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+
  • moment 2.24.0+

Try the sample app

Our sample app has all the core features of Sendbird UIKit for React. Download the app from our GitHub repository to get an idea of what you can build with the actual UIKit before building your own project.

Download Sample App


Supported browsers

BrowserSupported versions

Internet Explorer

11 or higher

Edge

13 or higher

Chrome

All modern versions

Firefox

All modern versions

Safari

11 or higher


UIKit components

ComponentDescription

SendBirdProvider

The context provider that stores Chat SDK for JavaScript and user information.

withSendBird

The higher-order component to access data from SendBirdProvider.

ChannelList

The UI component that renders channel components in a list.

Channel

The UI component that allows close interaction among a limited number of users.

ChannelSettings

The UI component that enables customized settings to be configured to each channel.

App

The app component that combines all of the above components.


Install UIKit

Enter the following on the command line with npm to install Sendbird UIKit.

Note : The minimum requirements for UIKit must be installed on your system to use npm.

Light Color Skin
Copy
npm install sendbird-uikit --save

Next, import UIKit components to your app.

Light Color Skin
Copy
import { SendBirdProvider, withSendBird, ... } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

Create a Sendbird application

A Sendbird application comprises everything required in a chat service including users, message, and channels. To create an application:

  1. Go to the Sendbird Dashboard and enter your email and password, and create a new account. You can also sign up with a Google account.
  2. When prompted by the setup wizard, enter your organization information to manage Sendbird applications.
  3. Lastly, when your dashboard home appears after completing setup, click Create App at the top-right corner. A Sendbird application can also be created through the Platform API.

Only one Sendbird application can be integrated per app for your service regardless of the platform. All users within your Sendbird application can communicate with each other across all platforms. This means that your iOS, Android, and web client app users can all send and receive messages with one another without any further setup.

Note: All data is limited to the scope of a single application, and users in different Sendbird applications can't chat with each other.


Implement UIKit to your web app

Implement UIKit to your web app by either using the App component or combining smart components to build a chat service customized to your needs.

Light Color Skin
Copy
import { SendBirdProvider, withSendBird, App ... } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

To use the App component, add the following pattern:

Light Color Skin
Copy
import { App as SendBirdApp } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const App = () => (
    <Route id={'/chat'}>
        <App appId={appId} userId={userId} />
    </Route>
)

To use smart components, add the following pattern:

Light Color Skin
Copy
import {
    SendBirdProvider,
    ChannelList,
    ChannelSettings,
    Channel,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const App = () => (
    <SendBirdProvider>
    ... other components
    <Route id={'/chat'}>
        <LeftPane>
            <ChannelList onChannelSelect={channel => setCurrentChannel(channel.url)}/>
        </LeftPane>
        <CenterPane>
            <Switch case={currentChannel}>
                <Route id={channelUrl1}>
                    <Channel channelUrl={channelUrl1} />
                </Route>
                <Route id={channelUrl2}>
                    <Channel channelUrl={channelUrl2} />
                </Route>
            </Switch>
        </CenterPane>
        <RightPane>
            <ChannelSettings channelUrl={currentChannel} />
        </RightPane>
    </Route>
    </SendBirdProvider>
)

To show a list of channels or change channels based on routes, implement as below:

Light Color Skin
Copy
import {
    SendBirdProvider,
    ChannelList,
    Channel,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css"; 

const App = () => {
    <SendBirdProvider appId={appId} userId={userId} ...>
        <Router>
            <Route>
                <Sidebar>
                    <Channel />
                </Sidebar>
                <Route id={yourApp/channelUrl1}>
                    <MainPanel>
                        <Channel channelUrl={yourApp/channelUrl1} />
                    </MainPanel>
                </Route>
                <Route id={yourApp/channelUrl2}>
                    <MainPanel>
                        <Channel channelUrl={yourApp/channelUrl2} />
                    </MainPanel>
                </Route>
            </Route>
            ...
        </Router>
    </SendBirdProvider>
}

Using UIKit with SSR frameworks

You can use UIKit with SSR frameworks such as Gatsby or NextJS by importing it dynamically on the client side. Plugins or workflows these frameworks support are as below:

You may refer to NextJS' sample for better understanding. You will need your own Sendbird application ID and user ID to use the sample.