Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

Create a channel

In UIKit for React, you can create a new group channel by using the CreateChannel module. There are two steps to creating a channel and each step has a separate UI as shown below.

Select a channel type to create.

Select users to invite to a new channel.

To create a Supergroup channel, first set allow_super_group_channel to true through Chat Platform API or in Sendbird Dashboard. The user who creates the channel automatically becomes the operator. More operators can be added to the channel through the ChannelSettings component or the onBeforeCreateChannel method.

Usage

To start using the CreateChannel module, implement the following code:

import CreateChannel from '@sendbird/uikit-react/CreateChannel';

List of properties

The following table lists the properties of the CreateChannel module.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. You can find this URL from the `url` property of the `GroupChannel`, or find it on your Sendbird Dashboard. (Default: `null`)

Optional	Type	Description
children	ReactElement	Specifies the child components of the `CreateChannelProvider`. (Default: `null`)
onChannelCreated	function	Specifies the prop to receive callback when a new channel is created.
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel.
userListQuery	instance	Specifies an ApplicationUserListQuery instance to retrieve users when creating a channel.
onCancel	function	Specifies the prop to execute custom operations when the cancel button is clicked. (Default: `null`)
renderStepOne	ReactElement	Renders a customized view of the first step of `CreateChannel` module.

Context

To store and handle data that are used to build a working group channel, Sendbird UIKit provides two context objects: CreateChannelProvider and useCreateChannel. The CreateChannelProvider is a context provider that manages all the logic and data used in the group channel view. The useCreateChannel is a custom hook that allows access to the provider's data, which are divided into state and actions properties.

CreateChannelProvider

CreateChannelProvider contains input props and internal data that handle all the operations in the module. The provider stores data from Chat SDK in real-time and exports them to the UI components. The following code shows how to start using CreateChannelProvider.

import { CreateChannelProvider } from '@sendbird/uikit-react/CreateChannel/context';

List of properties

The following table lists the properties of CreateChannelProvider.

Properties

Required	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)

Optional	Type	Description
children	ReactElement	Specifies the child components of the `CreateChannelProvider`. (Default: `null`)
onChannelCreated	function	Specifies the prop to receive callback when a new channel is created.
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel.
userListQuery	instance	Specifies an ApplicationUserListQuery instance to retrieve users when creating a channel.

useCreateChannel

The useCreateChannel custom hook exports the data in the provider to the UI components to create a functional channel view. Every UI component of any layer or level can get access to the data using the context hooks as long as they're inside the provider.

The useCreateChannel custom hook exposes two distinct sets of properties: state and actions. The state provides the variables relevant to the component, while actions offers functions that perform operations that have a side effect on the state properties.

The following code shows how to start using useCreateChannel.

import { useCreateChannel } from '@sendbird/uikit-react/CreateChannel/context';

List of state properties

The following table lists the state properties of useCreateChannel.

Property name	Type	Description
channelUrl	string	Specifies the URL of the group channel. (Default: `null`)
step	number	Specifies the current step during the channel creating process.
type	string (enum)	Specifies the channel type of the new channel to create. Acceptable values are `GROUP`, `SUPERGROUP`, and `BROADCAST`.
children	ReactElement	Specifies the child components of the `CreateChannelProvider`. (Default: `null`)
onChannelCreated	function	Specifies the prop to receive callback when a new channel is created.
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel.
userListQuery	instance	Specifies an ApplicationUserListQuery instance to retrieve users when creating a channel.

List of actions properties

The following table lists the actions properties of useCreateChannel.

Property name	Type	Description
setPageStep	function	Sets the step of the channel-making process.
setType	function	Sets the channel type of the new channel.
createChannel	function	Creates a channel.

UI components

The UI components in the CreateChannel module are the following: CreateChannelUI, InviteUsers, and SelectChannelType. They're the default set of UI components that compose the create channel view. Both CreateChannelUI and SelectChannelType components are used to display step one of the CreateChannel module while the InviteUsers component is used to show step two.

CreateChannelUI

CreateChannelUI is the component that renders a view of the first step of CreateChannel module. The following code shows how to implement CreateChannelUI.

import CreateChannelUI from '@sendbird/uikit-react/CreateChannel/components/CreateChannelUI';

List of properties

The following table lists the properties of CreateChannelUI.

Property name	Type	Description
onCancel	function	Specifies the prop to execute custom operations when the cancel button is clicked. (Default: `null`)
renderStepOne	ReactElement	Renders a customized view of the first step of `CreateChannel` module.

InviteUsers

The InviteUsers component renders a view of the second step of CreateChannel where the current user can select other users to join the channel. The following code shows how to implement InviteUsers.

import InviteUsers from '@sendbird/uikit-react/CreateChannel/components/InviteUsers';

List of properties

The following table lists the properties of InviteUsers.

Property name	Type	Description
onCancel	function	Specifies the prop to execute custom operations when the cancel button is clicked. (Default: `null`)

SelectChannelType

The SelectChannelType component renders a view of the first step of CreateChannel where the current user can choose which type of channel to create. The following code shows how to implement SelectChannelType.

import SelectChannelType from '@sendbird/uikit-react/CreateChannel/components/SelectChannelType';

List of properties

The following table lists the properties of SelectChannelType.

Property name	Type	Description
onCancel	function	Specifies the prop to execute custom operations when the cancel button is clicked. (Default: `null`)

On this page

Context

CreateChannelProvider useCreateChannel

UI components

CreateChannelUI InviteUsers SelectChannelType

Sample app