Common components
You can implement UIKit for React by using the following components. These components support both open channels and group channels.
SendBirdProvider
SendBirdProvider
is the context provider that passes the Chat SDK down to the child components, and is the most important component in UIKit for React. The React Context API is used to easily pass down data through components. By using withSendBird()
HOC or useSendbirdStateContext()
, Sendbird Chat SDK for Javascript can be implemented in any component under the SendBirdProvider
which has the following properties:
List of properties
Required | Type | Description |
---|---|---|
appId | string | The |
userId | string | The unique ID of the user. |
Optional | Type | Description |
---|---|---|
accessToken | string | The 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 filtered users and manually added 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) |
Note : The
App
component internally manages theSendBirdProvider
as well as other components and can be used to configure the above properties.
withSendBird()
The withSendBird()
is an HOC that helps you access data in the Chat SDK, and internally supports the Channel
, ChannelList
and ChannelSettings
. Using the withSendBird()
, data stored in the SendBirdProvider
state, which is stored through the React Context API, can be accessed. The withSendBird()
can be used to not only implement chat features, but also to access stored data for further customization.
Note : The Chat SDK can be accessed at
state.stores.sdkStore.sdk
or usingsendBirdSelectors.getSdk()
sendBirdSelectors
sendBirdSelectors
provides many useful selectors to perform various data operations and can also be used to write customized selectors. The main functionalities of sendBirdSelectors
regarding the Chat SDK are listed below.
List of functions
Function | Description |
---|---|
getConnect | Connects a user to Sendbird server. |
getDisconnect | Disconnects a user from Sendbird server. |
getUpdateUserInfo | Updates a user’s information such as nickname or profile image. |
getSdk | Returns the SDK instance of a user. |
getCreateChannel | Creates a new channel with params. |
getLeaveChannel | Leaves a channel. |
getSendUserMessage | Returns a promise chain which sends a user message to a specific channel. |
getSendFileMessage | Returns a promise chain to send a file message to a specific channel. |
getUpdateUserMessage | Updates a user message. |
getDeleteMessage | Deletes a user message. |
getResendUserMessage | Resends a failed user message. |
getResendFileMessage | Resends a failed file message. |
The sample code below shows how to implement sendBirdSelectors
with its properties.
useSendbirdStateContext
You can use the hook pattern to access the SendbirdProvider
's internal state through useSendbirdStateContext
. useSendbirdStateContext
can be used along with selectors to easily implement various functionalities.