Chat UIKit React v3
Chat UIKit React
Chat UIKit
React
Version 3

Customize the channel list screen

Copy link

Customize a user's channel list view to suit your service's needs. You can customize the channel list screen by adding or removing buttons, changing the layout, or modifying the UI components.

This tutorial demonstrates how to:

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

Copy link

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.

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import GroupChannelList from '@sendbird/uikit-react/GroupChannelList';
import GroupChannelListHeader from '@sendbird/uikit-react/GroupChannelList/components/GroupChannelListHeader';

const ChannelListPage = () => {
  return (
    <GroupChannelList
      renderHeader={() => (
        <GroupChannelListHeader
          // Render nothing to hide the button.
          renderLeft={() => {}}
          // Change the header text string.
          renderMiddle={() => (
            <Header.Title
              title={
                <Label
                  type=""
                  color=""
                >
                  "New title here"
                </Label>
              }
            />
          )}
          // Change 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'}
      >
        <ChannelListPage /> 
      </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