UIKit React v3

UIKit React

UIKit

React

Home

UIKit

React

This is the new Docs for UIKit v3 for React. To see the previous Docs, click here.

sendbirdSelectors

The sendbirdSelectors component provides selectors to execute key data operations in a chat such as send user message and delete message. You can also add customized selectors to sendbirdSelectors other than the main functions listed in the table below.

List of selector functions

Selector	Description
getSdk	Returns the SDK instance `SendbirdChat` of a user. Signature: `(store) => SendbirdChat`
getConnect	Connects a user to the Sendbird server using the `User` class. Signature: `(store) => (userId, accessToken) => Promise<User>`
getDisconnect	Disconnects a user from the Sendbird server. Signature: `(store) => () => Promise<void>`
getUpdateUserInfo	Updates a user's information such as nickname or profile image through User. Signature: `(store) => (nickname, profileUrl) => Promise<User>`
getGetGroupChannel	Returns `GroupChannel` with the given ID. Signature: `(store) => (channelUrl) => Promise<GroupChannel>`
getGetOpenChannel	Returns `OpenChannel` with the given ID. Signature: `(store) => (channelUrl) => Promise<OpenChannel>`
getCreateGroupChannel	Creates a new group channel with params using `GroupChannelCreateParams` and `GroupChannel`. Signature: `(store) => (GroupChannelCreateParams) => Promise<GroupChannel>`
getCreateOpenChannel	Creates a new open channel with params using `OpenChannelCreateParams` and `OpenChannel`. Signature: `(store) => (OpenChannelCreateParams) => Promise<OpenChannel>`
getLeaveGroupChannel	Leaves a group channel. Signature: `(store) => (channelUrl) => Promise<void>`
getEnterOpenChannel	Enters an `OpenChannel`. Signature: `(store) => (channelUrl) => Promise<OpenChannel>`
getExitOpenChannel	Leaves an open channel. Signature: `(store) => (channelUrl) => Promise<void>`
getFreezeChannel	Freeze the channel which is group or open channel. Signature:`() => (channel) => Promise<void>`
getUnfreezeChannel	Unfreeze the channel which is group or open channel. Signature:`() => (channel) => Promise<void>`
getSendUserMessage	Returns a promise chain which sends a user message to a specific channel through `UserMessageCreateParams` and `MessageHandler`. Signature: `(store) => (channel, UserMessageCreateParams) => MessageHandler`
getSendFileMessage	Returns a promise chain to send a file message to a specific channel through `FileMessageCreateParams` and `MessageHandler`. Signature: `(store) => (channel, FileMessageCreateParams) => MessageHandler`
getUpdateUserMessage	Updates a user message using `UserMessageUpdateParams` and `UserMessage`. Signature: `(store) => (channel, messageId, UserMessageUpdateParams) => Promise<UserMessage>`
getDeleteMessage	Deletes a user or file message. Signature: `(store) => (channel, message) => Promise<UserMessage \| FileMessage>`
getResendUserMessage	Resends a failed `UserMessage`. Signature: `(store) => (channel, UserMessage) => Promise<UserMesssage>`
getResendFileMessage	Resends a failed `FileMessage`. Signature: `(store) => (channel, FileMessage) => Promise<FileMessage>`

The example codes below shows how to implement sendbirdSelectors with the selector functions.

getDisconnectgetSDKgetCreateGroupChannel&moregetSendUserMessage&more

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import withSendbird from "@sendbird/uikit-react/withSendbird";
import sendbirdSelectors from "@sendbird/uikit-react/sendbirdSelectors";

const MyButton = (props) => {
    <button onClick={() => props.disconnect().then((reject, response) => { ... }); }>
        Disconnect
    </button>
}

const ButtonWithSendbird = withSendbird(MyButton, (state) => ({
    disconnect: sendbirdSelectors.getDisconnect(state),
}));

const App = () => {
    <SendbirdProvider appId={appId} userId={userId}>
        <div>
            <ButtonWithSendbird />
        </div>
    </SendbirdProvider>
}