UIKit React v3

UIKit React

UIKit

React

Home

UIKit

React

This is the new Docs for UIKit v3 beta 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
getConnect	Connects a user to the Sendbird server. Signature: `(store) => (userId, accessToken) => Promise<(User, error)>`
getDisconnect	Disconnects a user from the Sendbird server. Signature: `(store) => (userId, accessToken) => Promise<(_, error)>`
getUpdateUserInfo	Updates a user's information such as nickname or profile image. Signature: `(store) => (userId, accessToken) => Promise<(User, error)>`
getSdk	Returns the SDK instance of a user. Signature: `(store) => sdk`
getCreateChannel	Creates a new channel with params. Signature: `(store) => (GroupChannelParams) => Promise<(GroupChannel, error)>`
getLeaveChannel	Leaves a channel. Signature: `(store) => (channelUrl) => Promise<(_, error)>`
getSendUserMessage	Returns a promise chain which sends a user message to a specific channel. Signature: `(store) => (channelUrl, UserMessageParams) => Promise<(PendingMessage, error)> => Promise<(UserMessage, error)>`
getSendFileMessage	Returns a promise chain to send a file message to a specific channel. Signature: `(store) => (channelUrl, FileMessageParams) => Promise<(PendingMessage, error)> => Promise<(FileMessage, error)>`
getUpdateUserMessage	Updates a user message. Signature: `(store) => (channelUrl, messageId, UserMessageParams) => Promise<(UserMessage, error)>`
getDeleteMessage	Deletes a user message. Signature: `(store) => (channelUrl, message) => Promise<(_, error)>`
getResendUserMessage	Resends a failed user message. Signature: `(store) => (channelUrl, FailedUserMessage) => Promise<(Message, error)>`
getResendFileMessage	Resends a failed file message. Signature: `(store) => (channelUrl, FailedFileMessage) => Promise<(FileMessage, error)>`

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

getDisconnectgetSDKgetCreateChannel&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>
}