Chat UIKit React v2
Chat UIKit React
Chat UIKit
React
Version 2
Sendbird Chat UIKit v2 for React is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Open channel

Copy link

This page explains the key functions of open channels in Sendbird UIKit for React, demonstrating how to chat in a channel and configure the channel settings.

Open channels are a public chat that allows a massive number of users to interact with one other in a more dynamic environment. Open channels can accommodate far more users compared to group channels and don’t require an invitation for the users to enter. To learn more about different behaviors of open channels and group channels, see Channel types on how open channels and group channels work.


Chat in a channel

Copy link

An open channel allows dynamic interaction among a massive number of users. Open channels can be easily created and managed without the need for complex implementation.

The following table lists the channel properties and functions supported by UIKit for React.

List of properties

Copy link
RequiredTypeDescription

channelUrl

string

The unique URL of the channel.

OptionalTypeDescription

useMessageGrouping

boolean

Determines whether to use message grouping.

queries.messageListParams

Sendbird.MessageListParams

Configures the MessageListParams which is used for fetching chat history.

List of functions

Copy link
FunctionTypeDescription

renderUserProfile

({ user, currentUserId, close() }) => JSX.Element

Renders a user profile component.

disableUserProfile

boolean

Determines whether to show user profile.

renderChannelTitle

({ channel, user }) => JSX.Element

Renders a open channel title component.

renderMessageInput

({ channel, user, disabled }) => JSX.Element

Renders a message input component.

renderCustomMessage

(channel, message) => JSX.Element

Renders different types of messages.

onBeforeSendUserMessage

(text) => Sendbird.UserMessageParams

Changes the user message params before sending a user message.

onBeforeSendFileMessage

(file) => Sendbird.FileMessageParams

Changes the file message params before sending a file message.

onChatHeaderActionClick

() => void

Called when clicking a channel header icon.

OpenChannelrenderChannelTitlerenderCustomMessage
import {
    SendBirdProvider,
    OpenChannel,
} from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.css';

const DefaultConversation = () => {
    return (
        <SendBirdProvider
            appId={appId}
            userId={userId}
        >
            <div style={{ height: '90vh' }}>
                <OpenChannel
                    useMessageGrouping={false}  // To determine whether to use message grouping,
                    disableUserProfile  // to determine whether to display user profile on clicking userIcons,
                    channelUrl="app_10392453543/open_channel_234h51wsx194eff33" // pass your channel URL here.
                />
            </div>
        </SendBirdProvider>
  );
};

Configure the channel settings

Copy link

The OpenChannelSettings allows you to configure the open channel settings.

The following table lists the properties and functions of open channels in Sendbird UIKit for React.

List of properties

Copy link
Required
Property nameTypeDescription

channelUrl

string

The unique URL of the channel.

List of functions

Copy link
FunctionTypeDescription

onCloseClick

() => void

Called when clicking a close icon.

onChannelModified

(channel) => void

Called when the open channel settings are edited.

onBeforeUpdateChannel

(currentTitle, currentImg, data) => Sendbird.OpenChannelParams

Called when the open channel information has changed and returns the changed information before saving it.

renderChannelProfile

({ channel, user }) => React.JSXElement

Renders a channel profile component.

renderUserProfile

({ user, currentUserId, close() }) => JSX.Element

Renders a user profile component.

disableUserProfile

boolean

Determines whether to show user profile.

OpenChannelSettingsRenderChannelProfile
import {
    SendBirdProvider,
    OpenChannelSettings,
} from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.css';

export const RenderCustomMessage = () => {
    return (
        <SendBirdProvider
            appId={appId}
            userId={userId}
        >
            <div style={{ height: '90vh' }}>
                <OpenChannelSettings
                    channelUrl="app_10392453543/open_channel_234h51wsx194eff33" // Pass your channel URL here.
                />
            </div>
        </SendBirdProvider>
    );
};

sendBirdSelectors

Copy link

The following table lists the selectors provided by Sendbird UIKit for the operations of open channels.

List of functions

Copy link
FunctionDescription

getCreateOpenChannel

Creates a new channel with params.
Signature: (store) => (GroupChannelParams) => Promise<(GroupChannel, error)>

getEnterOpenChannel

Joins a channel.
Signature: (store) => (channelUrl) => Promise<(_, error)>

getExitOpenChannel

Leaves a channel.
Signature: (store) => (channelUrl) => Promise<(_, error)>

getOpenChannelSendUserMessage

Returns a promise chain which sends a user message to a specific channel.
Signature: (store) => (channelUrl, UserMessageParams) => Promise<(PendingMessage, error)> => Promise<(UserMessage, error)>

getOpenChannelSendFileMessage

Returns a promise chain to send a file message to a specific channel.
Signature: (store) => (channelUrl, FileMessageParams) => Promise<(PendingMessage, error)> => Promise<(FileMessage, error)>

getOpenChannelUpdateUserMessage

Updates a user message.
Signature: (store) => (channelUrl, messageId, UserMessageParams) => Promise<(UserMessage, error)>

getOpenChannelDeleteMessage

Deletes a user message.
Signature: (store) => (channelUrl, message) => Promise<(_, error)>

getOpenChannelResendUserMessage

Resends a failed user message.
Signature: (store) => (channelUrl, FailedUserMessage) => Promise<(Message, error)>

getOpenChannelResendFileMessage

Resends a failed file message.
Signature: (store) => (channelUrl, FailedFileMessage) => Promise<(FileMessage, error)>

import {
    SendBirdProvider,
    withSendBird,
    sendBirdSelectors,
} from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.css';
const CustomComponent = (props) => {
    const {
        enterOpenChannel,
        exitOpenChannel,
        openChannelSendUserMessage,
        openChannelSendFileMessage,
        openChannelUpdateUserMessage,
        openChannelDeleteMessage,
        openChannelResendUserMessage,
        openChannelResendFileMessage,
    } = props;
    return (
        <button onClick={() => { enterOpenChannel('channelUrl').then((channel) => { console.log(channel); }) }}>
            Enter Channel
        </button>
        ... // Implement your custom component here and you can use the functions from props.
    )
};
const CustomComponentWithSendBird = withSendBird(CustomComponent, (state) => {
    const enterOpenChannel = sendBirdSelectors.enterOpenChannel(state);
    const exitOpenChannel = sendBirdSelectors.exitOpenChannel(state);
    const openChannelSendUserMessage = sendBirdSelectors.getOpenChannelSendUserMessage(state);
    const openChannelSendFileMessage = sendBirdSelectors.getOpenChannelSendFileMessage(state);
    const openChannelUpdateUserMessage = sendBirdSelectors.getOpenChannelUpdateUserMessage(state);
    const openChannelDeleteMessage = sendBirdSelectors.getOpenChannelDeleteMessage(state);
    const openChannelResendUserMessage = sendBirdSelectors.getOpenChannelResendUserMessage(state);
    const openChannelResendFileMessage = sendBirdSelectors.getOpenChannelResendFileMessage(state);
    return ({
        enterOpenChannel,
        exitOpenChannel,
        openChannelSendUserMessage,
        openChannelSendFileMessage,
        openChannelUpdateUserMessage,
        openChannelDeleteMessage,
        openChannelResendUserMessage,
        openChannelResendFileMessage,
    });
});
export const MessageCRUDSelectors = () => (
    <SendBirdProvider appId={appId} userId={userId} nickname={userId}>
        <CustomComponentWithSendBird />
    </SendBirdProvider>
);