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

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.

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

List of properties

Required	Type	Description
channelUrl	string	The unique URL of the channel.

Optional	Type	Description
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

Function	Type	Description
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

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

Required

Property name	Type	Description
channelUrl	string	The unique URL of the channel.

List of functions

Function	Type	Description
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

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

List of functions

Function	Description
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>
);

On this page

Chat in a channel Configure the channel settings

Sample app