UIKit React v2
UIKit React
New Docs for the latest UIKit v3 for React is now available.Go to v3


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()

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

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.