Home
/
UIKit
/
React

Open channel

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

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.

Open channle chat view.

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

List of properties

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

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.

renderByMessageType

() => JSX.Element

Render messages with different types.

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.

OpenChannel
renderChannelTitle
renderCustomMessage
Light Color Skin
Copy
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>
  );
};
Light Color Skin
Copy
import {
    SendBirdProvider,
    OpenChannel,
} from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.css';

export const RenderCustomMessage = () => {
    return (
        <SendBirdProvider
            appId={appId}
            userId={userId}
        >
            <div style={{ height: '90vh' }}>
                <OpenChannel
                    channelUrl="app_10392453543/open_channel_234h51wsx194eff33"
                    renderChannelTitle={({ channel, user }) => (
                        <div>{channel.url} {user.nickname}</div>
                    )}
                />
            </div>
        </Sendbird>
    );
};
Light Color Skin
Copy
import {
    SendBirdProvider,
    OpenChannel,
} from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.css';

export const RenderCustomMessage = () => {
    return (
        <SendBirdProvider
            appId={appId}
            userId={userId}
        >
            <div style={{ height: '90vh' }}>
                <OpenChannel
                    channelUrl="app_10392453543/open_channel_234h51wsx194eff33"
                    renderCustomMessage={(message, channel) => {
                        if (message.messageType === 'user') {
                            return () => (
                                <div style={{ color: 'red' }}>{message.message}</div>
                            )
                        }
                    }}
                />
            </div>
        </Sendbird>
    );
};

Configure the channel settings

The OpenChannelSettings allows you to configure the open channel settings.

OpenChannelSettings shows channel information and allows you to edit it.

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

List of properties

Required
Property nameTypeDescription

channelUrl

string

The unique URL of the channel.

List of functions

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 profilen component.

disableUserProfile

boolean

Determines whether to show user profile.

OpenChannelSettings
RenderChannelProfile
Light Color Skin
Copy
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>
        </Sendbird>
    );
};
Light Color Skin
Copy
import {
    SendBirdProvider,
    OpenChannelSettings,
} from 'sendbird-uikit';
import 'sendbird-uikit/dist/index.cs;

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

sendBirdSelectors

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

List of functions

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)>

Light Color Skin
Copy
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>
);