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.
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.
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;