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 DashboardChannelSettings
component or the onBeforeCreateChannel
method.
To start using the CreateChannel
module, implement the following code:
The following table lists the properties of the CreateChannel
module.
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 |
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 |
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 |
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
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
.
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 |
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 |
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
.
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 |
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 |
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
is the component that renders a view of the first step of CreateChannel
module. The following code shows how to implement CreateChannelUI
.
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 |
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
.
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: |
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
.
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: |