Chat UIKit React v2
Chat UIKit React
Chat UIKit
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3


Copy link

In order to use the features of Sendbird UIKit for React in your client apps, a SendBird instance must be initiated in each client app through user authentication with Sendbird server. UIKit automatically manages the app state and reconnection logic for you. Core features of Sendbird Chat SDK for JavaScript can be used with the withSendBird() high-order component (HOC) as below.

Note : To manually manage connections, extract the connect(), disconnect(), updateUserInfo() functions from the getConnect, getDisconnect, and getUpdateUserInfo in sendBirdSelectors.

Use the withSendBird()

Copy link

The UIKit functions are identical to the Sendbird Chat SDK’s functions, except that instead of returning the callback function, it returns the Promise object instead. To learn more about authentication, refer to the Authentication page of our chat SDK for JavaScript documentation.

import {
} from "sendbird-uikit";

const MyComponent = props => (
    <button onClick={() => props
        .connect(userId, accessToken)
        .then(user => {...})
        .catch(error => {...})
    } />

const CustomComponent = withSendBird(MyComponent,
    state => ({ // Mapping context state to props
        connect: sendBirdSelectors.getConnect(state),

Update user profile

Copy link

There are two ways to update a user profile:

  • Passing a user's nickname and profile URL through the SendBirdProvider.
  • Using the withSendBird and sendBirdSelectors.