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:
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 |
| Optional | Type | Description |
|---|---|---|
children | ReactElement | Specifies the child components of the |
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: |
renderStepOne | ReactElement | Renders a customized view of the first step of |
Context
To store and handle data that are used to build a working group channel, Sendbird UIKit provides two context objects: CreateChannelProvider and useCreateChannelContext. The CreateChannelProvider is a context provider that manages all the logic and data used in the group channel view. The useCreateChannelContext 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.
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: |
| Optional | Type | Description |
|---|---|---|
children | ReactElement | Specifies the child components of the |
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. |
useCreateChannelContext
The useCreateChannelContext 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 useCreateChannelContext.
List of properties
The following table lists the properties of useCreateChannelContext.
| Property name | Type | Description |
|---|---|---|
channelUrl | string | Specifies the URL of the group channel. (Default: |
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 |
setType | function | Sets the channel type of the new channel to create. |
children | ReactElement | Specifies the child components of the |
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. |
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.
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: |
renderStepOne | ReactElement | Renders a customized view of the first step of |
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.
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: |
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.
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: |