You can implement UIKit for React by using the following components. These components support both open channels and group channels.
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
SendBirdProvider which has the following properties:
List of properties
The unique ID of the user.
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)
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 filtered users and manually added 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)
Note : The
Appcomponent internally manages the
SendBirdProvideras well as other components and can be used to configure the above properties.
withSendBird() is an HOC that helps you access data in the Chat SDK, and internally supports the
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
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
Connects a user to Sendbird server.
Disconnects a user from Sendbird server.
Updates a user’s information such as nickname or profile image.
Returns the SDK instance of a user.
Creates a new channel with params.
Leaves a channel.
Returns a promise chain which sends a user message to a specific channel.
Returns a promise chain to send a file message to a specific channel.
Updates a user message.
Deletes a user message.
Resends a failed user message.
Resends a failed file message.
The sample code below shows how to implement
sendBirdSelectors with its properties.
You can use the hook pattern to access the
SendbirdProvider's internal state through
useSendbirdStateContext can be used along with selectors to easily implement various functionalities.