Home
/
UIKit
/
React

Send first message

Sendbird UIKit for React is a set of prebuilt UI components that allows you to easily craft an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, text fonts, colors and more. You can customize these components to create an interactive messaging interface unique to your brand identity.

Sendbird UIKit supports both open channels and group channels. Follow the guide below to start sending a message from scratch with React. This library isn't designed to work with other frameworks such as Vue or Angular.

Two UIKit views on the Light theme are shown: list of channels, chat view.


Requirements

The dependencies for UIKit for React are:

  • React 16.8.0 or higher
  • React DOM 16.8.0 or higher
  • Sendbird Chat SDK for JavaScript 3.0.117 or higher
  • css-vars-ponyfill 2.3.2
  • date-fns 2.16.1

Note: From v1.3.0, UIKit doesn't support moment.


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


Get started

You can start building a modern messaging experience in your app by first installing Sendbird UIKit. This developer kit is an add-on feature to Sendbird Chat SDK so installing it will also install the core Chat SDK.

Step 1 Install with npm

You can install UIKit for React through npm. Enter the following code on the command line with npm. The minimum requirements listed above must be installed on your system to use npm.

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

When using yarn, enter the following command.

Light Color Skin
Copy
yarn add sendbird-uikit

Next, import UIKit components to your app.

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

Step 2 Create a Sendbird application

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

  1. Go to the Sendbird Dashboard and enter your email and password to 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. Then when your dashboard home appears after completing setup, click Create + at the top-right corner.
  4. Once you've created a new application, go to Users and click Create user + at the top-right corner. This step is necessary in order to create a group channel and send a message.

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 send and receive messages with each other without any further setup. However, users in different Sendbird applications can't chat with each other since all data is limited to the scope of a single application.

Step 3 Implement UIKit to your web app

Once you're done installing Sendbird UIKit, you can now implement it to your web app by using the App component. The App component is a group of essential UI components needed to build a functioning chat interface. You can also use our smart components to your web app if you wish to customize your interface more.

Add the following pattern to use the App component:

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

const App = () => {
    return (
        <div className="App">
            <SendBirdApp
                // Add the two lines below.
                appId={YOUR_APP_ID};    // Specify your Sendbird application ID.
                userId={USER_ID};    // Specify your user ID.
            />
        </div>
    );
};

Specify the dimensions of your chat interface.

Light Color Skin
Copy
.App {
    Font-family: sans-serif;
    Text-align: center;
    height: 100vh;   // Add this line.
    width: 100vw;   // Add this line.
}

Step 4 Send your first message

You can now run the application. To send a message, you must first create a group channel by clicking on the icon in the top-left corner. Then, you can select users you wish to invite as members to your channel. Once the channel has been created, type your first message and press send.

You've successfully sent your first message with Sendbird.


Use UIKit with SSR frameworks

You can use UIKit with SSR frameworks such as Gatsby or NextJS by importing it dynamically on the client side. These frameworks support the following plug-in and workflow:

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


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.