UIKit React v3

UIKit React

UIKit

React

Home

UIKit

React

This is the new Docs for UIKit v3 for React. To see the previous Docs, click here.

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. (Default: `null`)

Optional	Type	Description
children	ReactElement	Specifies the child components of the `CreateChannelProvider`. (Default: `null`)
onCreateChannel	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.
queries.applicationUserListQuery	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 hook. CreateChannelProvider is a context provider that manages all the logic and data used in the group channel view. useCreateChannel is a context hook that allows access to the provider's data.

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`)
onCreateChannel	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.
queries.applicationUserListQuery	instance	Specifies an ApplicationUserListQuery instance to retrieve users when creating a channel.

useCreateChannel

The useCreateChannel context 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 following code shows how to start using useCreateChannel.

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

List of properties

The following table lists the 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.
setStep	function	Sets the step of the channel-making process.
type	string (enum)	Specifies the channel type of the new channel to create. Acceptable values are `GROUP`, `SUPERGROUP`, and `BROADCAST`.
setType	function	Sets the channel type of the new channel to create.
children	ReactElement	Specifies the child components of the `CreateChannelProvider`. (Default: `null`)
onCreateChannel	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.
queries.applicationUserListQuery	instance	Specifies an ApplicationUserListQuery instance to retrieve users when creating a channel.

UI components

The UI components in the CreateChannel module are the following: CreateChannelUI, InviteMembers, 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 InviteMembers 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.

InviteMembers

The InviteMembers 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 InviteMembers.

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

List of properties

The following table lists the properties of InviteMembers.

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