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.

  1. Select a channel type to create.

  1. 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
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

OptionalTypeDescription

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
RequiredTypeDescription

channelUrl

string

Specifies the URL of the group channel. (Default: null)

OptionalTypeDescription

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 nameTypeDescription

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 nameTypeDescription

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 nameTypeDescription

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 nameTypeDescription

onCancel

function

Specifies the prop to execute custom operations when the cancel button is clicked. (Default: null)