Customize the channel settings screen

This tutorial walks you through the process of customizing the channel settings screen in your React app. In this tutorial, you will be able to:

Customize the header

Note: Our React StoryBook offers the full list of customizable components, their properties, and even sample codes. Visit the StoryBook to explore more customization options.

Header

The channel settings screen can be largely divided into to sections: a header with a title and buttons and a body that contains menu items. Here, we will focus on customizing the header.

The header consists of a title and the buttons on each end. You can customize the button icons, their color, and size through renderLeft and renderRight functions. You can also hide them by rendering nothing like renderLeft={() => {}}.

Meanwhile, the header text string can be customized through the renderMiddle function.

JavaScript

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import ChannelSettings from '@sendbird/uikit-react/ChannelSettings';
import Header from '@sendbird/uikit-react/ui/Header';

const ChannelSettingsPage = () => {
  return (
    <ChannelSettings
      renderHeader={() => (
        <Header
          // Render nothing to hide the button.
          renderLeft={() => {}}
          // Change the header text string.
          renderMiddle={() => (
            <Header.Title
              title={
                <Label
                  type=""
                  color=""
                >
                  "New text here"
                </Label>
              }
            />
          )}
          // Show or hide the right-top corner button.
          renderRight={() => (
            <Header.IconButton
              type="INFO"
              color="CONTENT"
              renderIcon={(props) => (
                <Header.Icon
                  {...props}
                  width="24px"
                  height="24px"
                />
              onClick={() => {}}
            />
          )}
        />
      )}
    />
  );
};


function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
      <SendbirdProvider
        // Your Sendbird application ID can be found on Sendbird dashboard. 
        appId={'SENDBIRD_APPLICATION_ID'}
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  
        userId={'USER_ID'}
      >
        <ChannelSettingsPage />
      </SendbirdProvider>
    </div>
  )
}

export default App;

Note: You can find a full list of props you can customize at our React StoryBook on icons.

On this page

Header

Sample app