Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Send your first message

Copy link

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, 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.


Requirements

Copy link

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 4.0.0 or higher(@sendbird/chat)
  • css-vars-ponyfill 2.3.2
  • date-fns 2.16.1

Supported browsers

Copy link
BrowserSupported versions

Internet Explorer

Not supported

Edge

13 or higher

Chrome

All modern versions

Firefox

All modern versions

Safari

11 or higher


Before you start

Copy link

Before installing Sendbird Chat SDK, you need to create a Sendbird application on the Sendbird Dashboard, which comprises everything required in a chat service including users, messages, and channels. You will need the App ID of your Sendbird application when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.


Get started

Copy link

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 UIKit

Copy link

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.

npm i @sendbird/uikit-react

When using yarn, enter the following command.

yarn add @sendbird/uikit-react

If you're working in a TypeScript project, add the following line to tsconfig.include:

node_modules/@sendbird/uikit-react/index.d.ts

An example of a tsconfig file should look like the following:

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "esModuleInterop": true,
        "jsx": "react-jsx",
    },
    "include": [
        "src",
        "node_modules/@sendbird/uikit-react/index.d.ts"
    ]
}

Next, import UIKit components to your app.

import SendbirdApp from "@sendbird/uikit-react/App";
import "@sendbird/uikit-react/dist/index.css";

Step 2 Implement UIKit to your web app

Copy link

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 core components to your web app if you wish to make the interface more tailored to your needs.

Add the following pattern to use the App component:

import SendbirdApp from '@sendbird/uikit-react/App';
import '@sendbird/uikit-react/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>
    );
};

The chat interface can expand up to the dimensions of your parent component. To achieve a full-screen mode, apply the following CSS rules to the parent element.

.App {
  height: 100vh;   // Add this line.
  width: 100vw;   // Add this line.
}

Step 3 Send your first message

Copy link

You can now run the app to send a message. 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, enter your first message and send.

You've successfully sent your first message with Sendbird.


UIKit with SSR frameworks

Copy link

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.


The App component is a collection of all UIKit components needed to quickly implement a basic chat, and only requires the app ID and user ID to be configured.

List of properties

Copy link
RequiredTypeDescription

appId

string

The APP_ID of the Sendbird application.

userId

string

The unique ID of the user.

OptionalTypeDescription

accessToken

string

An opaque string that identifies the user. It is recommended that every user has their own access token and provides it upon login for security. (Default: null)

theme

string

A style applied to the app. Available themes are light and dark. (Default: light)

nickname

string

The user's nickname. (Default: null)

profileUrl

string

The URL of the user's profile image. (Default: null)

userListQuery

interface

The query factory class to retrieve a list of custom users. (Default: Chat SDK's ApplicationUserListQuery)

stringSet

object

The set of strings for UIKit components. This can override the default language. (Default: null)

colorSet

object

The set of colors used in the UIKit themes. This can overrides the default theme. (Default: null)

allowProfileEdit

boolean

Determines whether to allow the user to edit their profile. (Default: false)

disableUserProfile

boolean

Determines whether to display the profile preview section when the avatar is selected. If set to true, the profile preview section is not shown. (Default: false)

showSearchIcon

boolean

Determines whether to show the search icon in the channel title. (Default: false)

ThreadReplySelectType

function

Specifies the prop to direct users to view either the parent message or the thread when they click on a reply button in the group channel module. Acceptable values are: PARENT and THREAD.

// Create a chat application.
import SendbirdApp from '@sendbird/uikit-react/App';

const MyApp = () => {
    <Route id={'/chat'}>
        <SendbirdApp
            appId={appId}
            userId={userId}
            nickname={nickname}
            profileUrl={profileUrl}
            accessToken={accessToken}
            theme={theme}
            userListQuery={userListQuery}
        />
    </div>
}