Customization

UI components are the smallest level of components that render the UI of client app. Each module has a set of pre-built UI components, but they can be used freely between different modules. Modules and UI components are both customizable in UIKit if you don't want to use the default views.

Along with UI components mentioned in each module page, there are many more child components that compose a view. They include buttons, avatars, icons, and modals just to name a few. The list of UI components available from UIKit for React can be explored on the Storybook page.

Note : Not all UI components can be used and customized outside of the SendbirdProvider component because some components come with localization services.

There are three ways to customize UI components in UIKit for React: use modules, use provider and UI components, or build your own custom UI component.

Use top-level modules

You can choose to only customize the top-level module to make changes to a view. The outer layer of the module contains a provider and UI components grouped together, which allows you to apply the most basic customization. You can customize the module by using render props. This method is the quickest and most simple way to make changes to the UI of the screen, but it doesn't allow for any detailed level of customization.

Import SendbirdProvider and define the ChannelList smart component inside the provider first. Then, use the props to make modifications. Refer to the example code below on how to customize the channel list view.

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import ChannelList from "@sendbird/uikit-react/ChannelList";

const CustomApp = () => {
  return (
    <SendbirdProvider ... >
      <ChannelList
        ...
        onChannelSelect={(channel: GroupChannel) => void}
        onBeforeCreateChannel={(users: Array<User>) => GroupChannelParams}
        ...
        renderHeader={() => React.ReactNode}
        renderChannelPreview={({ channel, onLeaveChannel }) => React.ReactNode}
      />
    </SendbirdProvider>
  );
};

Use provider and UI components

To make more detailed customizations to a view, you can use the provider and UI components in the module. Each module has a provider that contains a set of pre-built UI components. To customize the module, you can modify either the provider or the UI components. Since all UI components share the same provider, they refer to one data source. This means that if you customize the logic or the event handlers of a provider, the changes will apply to all UI components sharing the same provider.

You can also choose to customize the UI components if you want to make changes to the view of the module. In every module, there's a UI component that displays the basic screen of the module and contains placeholders for other components. If you want to apply the same modifications to all UI components, you need to customize the UI component that displays the whole screen. If not, you can solely customize a single child component.

Refer to the example code below on how to customize ChannelListProvider.

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import { ChannelListProvider } from "@sendbird/uikit-react/ChannelList/context";
import ChannelListUI from "@sendbird/uikit-react/ChannelList/components/ChannelListUI";

const CustomApp = () => {
  return (
    <SendbirdProvider ... >
      <ChannelListProvider
        className={string}
        allowProfileEdit={boolean}
        disableAutoSelect={boolean}
        disableUserProfile={boolean}
        onThemeChange={(theme: string) => void}
        onChannelSelect={(channel: GroupChannel) => void}
        onProfileEditSuccess={(user: User) => void}
        onBeforeCreateChannel={(users: Array<User>) => GroupChannelParams}
        sortChannelList={(channels: Array<GroupChannel>) => Array<GroupChannel>}
        queries={{ applicationUserListQuery: { }, channelListQuery: { } }}
      >
        <ChannelListUI ... />
      </ChannelListProvider>
    </SendbirdProvider>
  );
};

Refer to the example code below on how to customize ChannelListUI in SendbirdProvider.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context'
import ChannelListUI from '@sendbird/uikit-react/ChannelList/components/ChannelListUI'

const CustomApp = () => {
  return (
    <SendbirdProvider ... >
      <ChannelListProvider ... >
        <ChannelListUI
          renderHeader={() => React.ReactNode}
          renderUserProfile={({ user, currentUserId, close }) => React.ReactNode}
          renderChannelPreview={({ channel, onLeaveChannel }) => React.ReactNode}
          renderPlaceHolderError={() => React.ReactNode}
          renderPlaceHolderLoading={() => React.ReactNode}
          renderPlaceHolderEmptyList={() => React.ReactNode}
        />
        <ChannelListUI ... >
      </ChannelListProvider>
    </SendbirdProvider>
  );
};

Refer to the example code below on how to customize AddChannel, which is a component displayed in ChannelListUI in SendbirdProvider.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
import {ChannelListProvider} from '@sendbird/uikit-react/ChannelList/context'
import AddChannel from '@sendbird/uikit-react/ChannelList/components/AddChannel'

const CustomApp = () => {
    return (
        <SendbirdProvider ... >
            <ChannelListProvider ... >
                // Customize here.
                <AddChannel />
            </ChannelListProvider>
        </SendbirdProvider>
    );
};

Build your own custom UI component

If you don't want to use the default module provided by UIKit to build your app, you can make your own custom UI component and apply it to the provider. For example, you can choose to display only the create channel button without the header or channel list component in the channel list provider.

Follow the steps below on how to make your own custom UI component and apply it to the provider.

Create your own custom ChannelListUI.

import { useChannelListContext, ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
import ChannelPreview from '@sendbird/uikit-react/ChannelList/components/ChannelPreview';
import PlaceHolder, { PlaceHolderTypes } from '@sendbird/uikit-react/ui/PlaceHolder'

const CustomChannelList = ({ setCurrentChannel }) => {
  const { allChannels, currentChannel, loading, initialized } = useChannelListContext();
  if (!initialized) return <PlaceHolder type={PlaceHolderTypes.WRONG} />;
  if (loading) return <PlaceHolder type={PlaceHolderTypes.LOADING} />;

  return (
    <div className="custom-channel-list">
      {allChannels.map((channel) => (
        <ChannelPreview
          channel={channel}
          isActive={channel.url === currentChannel.url}
          onClick={() => setCurrentChannel(channel.url)}
        />
      ))}
    </div>
  );
};

export default function ChannelListWrapper(props) {
  return (
    <ChannelListProvider>
      <CustomChannelList {...props} />
    </ChannelListProvider>
  );
}

Apply the custom UI component to the provider.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
import {ChannelListProvider} from '@sendbird/uikit-react/ChannelList/context'

import CustomChannelList from './CustomChannelList'

const CustomApp = () => {
  const [currentChannelUrl, setCurrentChannelUrl] = useState('');
  return (
    <SendbirdProvider ... >
      <ChannelListProvider
        className={string}
        allowProfileEdit={boolean}
        disableAutoSelect={boolean}
        ...
      >
        <CustomChannelList setCurrentChannel={setCurrentChannelUrl}/>
      </ChannelListProvider>
    </SendbirdProvider>
  );
};

On this page

Use top-level modules Use provider and UI components Build your own custom UI component

Sample app