SendbirdProvider

SendbirdProvider is the most important component in UIKit for React because it's the context provider that passes the Chat SDK down to the child components. The custom hook is used to easily pass down data through components. By using the useSendbird() custom hook, you can implement Sendbird Chat SDK for React in any of the components under SendbirdProvider. The following table shows a list of properties of the SendbirdProvider component.

Note: SendbirdProvider must be placed at the top level of your app.

List of properties

Properties

Required	Type	Description
appId	string	Specifies the `APP_ID` of the Sendbird application.
userId	string	Specifies the unique ID of the user.

Optional	Type	Description
accessToken	string	Specifies an opaque string that identifies the user. It's recommended that every user has their own access token and provides it upon login for security. (Default: `null`)
theme	string	Specifies a style that's applied to the entire client app. Available themes are `light` and `dark`. (Default: `light`)
nickname	string	Specifies the user's nickname. (Default: `null`)
profileUrl	string	Specifies the URL of the user's profile image. (Default: `null`)
userListQuery	interface	Specifies the query factory class to retrieve a list of filtered users and manually added users. (Default: Chat SDK's `ApplicationUserListQuery`)
dateLocale	locale	Specifies the prop to localize the date and time of the current user's client app using Localization object from date-fns. (Default: `en-US`)
stringSet	object	Specifies a set of strings used in UIKit components. You can override the default language using the stringSet. (Default: `null`)
colorSet	object	Specifies a set of colors used in the UIKit themes. You can override the theme using the colorSet. (Default: `null`)
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`.
onStartDirectMessage	function	Specifies the prop to handle the action when a user starts a 1-to-1 channel by clicking the message on a user profile icon. (Default: `null`)
~~onUserProfileMessage~~	function	*(Deprecated)* Specifies the prop to handle the action when a user starts a 1-to-1 channel by clicking the message on a user profile icon. (Default: `null`)

Note : The App component internally manages SendbirdProvider as well as other components and can be used to configure the above properties.

useSendbird

The useSendbird is a useState hook pattern that lets you access the internal state and actions available in sendbirdProvider. You can use the useSendbird custom hook to implement various functionalities such as displaying a user's profile or sending a user message. Refer to the example codes below.

import { useSendbird } from "@sendbird/uikit-react";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";

const DEFAULT_USER_PROFILE_URL = "https://via.placeholder.com/80"; // Fallback image URL
const DEFAULT_USER_NAME = "No Name";

const UserProfile = () => {
  const { state: { store } } = useSendbird();
  const { userStore } = store.stores;
  const { user } = userStore;

  return (
    <div className="sendbird__user-profile">
      <section className="sendbird__user-profile-avatar">
        <img
          height="80px"
          width="80px"
          src={user?.profileUrl ?? DEFAULT_USER_PROFILE_URL}
          alt={user.nickname ? `${user.nickname}'s avatar` : "Default avatar"}
        />
      </section>
      <section className="sendbird__user-profile-name">
        <span>{user?.nickname || DEFAULT_USER_NAME}</span>
      </section>
    </div>
  );
};

const App = () => {
  return (
    // Replace YOUR_APP_ID and YOUR_USER_ID with your values from https://dashboard.sendbird.com/
    <SendbirdProvider
      appId={"YOUR_APP_ID"}
      userId={"YOUR_USER_ID"}
    >
      <UserProfile />
    </SendbirdProvider>
  );
};
export default App;

List of state properties

The following table lists the state properties of useSendbird.

Property name	Type	Description
config	SendbirdStateConfig	Specifies the global configurations.
stores	SendbirdStateStore	Specifies a set of the user or SDK states.
eventHandlers	SBUEventHandlers	Specifies a set of the global event handlers.
emojiManager	EmojiManager	Specifies the global `EmojiManager` instance.

List of actions properties

The following table lists the actions properties of useSendbird.

Property name	Type	Description
connect	function	Create the connection to the server.
disconnect	function	Disconnect the current connection.
updateUserInfo	function	Update the current user instance.

On this page

useSendbird

Sample app