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
Note: While group channels provide a
ChannelListcomponent, open channels do not. You have to create your own list of open channels.
The dependencies for UIKit for React are:
React 16.8.0 or higher
React DOM 16.8.0 or higher
Note: From v1.3.0, UIKit doesn't support
11 or higher
13 or higher
All modern versions
All modern versions
11 or higher
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.
yarn, enter the following command.
Next, import UIKit components to your app.
A Sendbird application comprises everything required in a chat service including users, channels, and messages. To create an application:
- 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.
- When prompted by the setup wizard, enter your organization information to manage Sendbird applications.
- Then when your dashboard home appears after completing setup, click Create + at the top-right corner.
- 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.
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 common components to your web app if you wish to make the interface more tailored to your needs.
Add the following pattern to use the
Specify the dimensions of your chat interface.
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.
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 higher-order component to access data from
The UI component that renders channel components in a list.
The UI component that allows close interaction among a limited number of users.
The UI component that enables customized settings to be configured to each channel.
The app component that combines all of the above components.
App component is a collection of all UIKit components needed to implement chat, and only requires the app ID and user ID to be configured.
The unique ID of the user.
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)
A style applied to the app. Available themes are light and dark. (Default: light)
The user’s nickname. (Default: null)
The URL of the user’s profile image. (Default: null)
The query factory class to retrieve a list of custom users. (Default: Chat SDK's ApplicationUserListQuery)
The set of strings for UIKit components. This can override the default language. (Default: null)
The set of colors used in the UIKit themes. This can overrides the default theme. (Default: null)
Determines whether to allow the user to edit their profile. (Default: false)
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)
Determines whether to show the search icon in the channel title. (Default: false)