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 "@sendbird/uikit-react/dist/index.css";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import GroupChannelList from "@sendbird/uikit-react/GroupChannelList";
import GroupChannelListHeader from "@sendbird/uikit-react/GroupChannelList/components/GroupChannelListHeader";
import Header from "@sendbird/uikit-react/ui/Header";
const ChannelListPage = () => {
return (
<GroupChannelList
onChannelSelect={(channel) => {
if (!channel) return;
// handle channel selection; it will automatically select the first item in the channel list.
}}
onChannelCreated={(channel) => {
// handle on channel created
}}
renderHeader={() => (
<GroupChannelListHeader
// Render nothing to hide the button.
renderLeft={() => <></>}
// Change the header text string.
renderMiddle={() => <Header.Title title={"New title here"} />}
// Change the right-top corner button.
renderRight={() => (
<Header.IconButton
type="INFO"
color="CONTENT"
renderIcon={(props) => (
<Header.Icon
{...props}
width="24px"
height="24px"
color="GRAY"
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", display: "flex" }}>
<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"}
>
<div className="sendbird-app__channellist-wrap">
<ChannelListPage />
</div>
</SendbirdProvider>
</div>
);
}
export default App;
You can create a custom preview for each channel using renderChannelPreview. This includes:
Channel Cover Image: Displays the channel’s cover image.
Members: Displays the first two members of the channel.
Last Message: Displays the last message sent in the channel.
Leave Button: A button to leave the channel directly, calling onLeaveChannel with the channel information.
import "@sendbird/uikit-react/dist/index.css";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import GroupChannelList from "@sendbird/uikit-react/GroupChannelList";
// Customize the channel preview
const CustomChannelPreview = ({ channel, onLeaveChannel }) => (
<div style={{ border: "1px solid gray", padding: "10px", margin: "5px" }}>
<img height="20px" width="20px" src={channel.coverUrl} alt="Channel Cover" />
<span>
{channel.members.slice(0, 2).map((member) => member.nickname).join(",")}
</span>
<div>
<span>{channel.lastMessage?.message}</span>
</div>
<button onClick={() => onLeaveChannel(channel, () => {})}>Leave</button>
</div>
);
const ChannelListPage = () => {
return (
<GroupChannelList
onChannelSelect={(channel) => {
if (!channel) return;
// handle channel selection; it will automatically select the first item in the channel list.
}}
onChannelCreated={(channel) => {
// handle on channel created
}}
// this will render the preview of the channel in channel list
renderChannelPreview={({ channel, onLeaveChannel }) => (
<CustomChannelPreview
channel={channel}
onLeaveChannel={onLeaveChannel}
/>
)}
/>
);
};
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", display: "flex" }}>
<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"}
>
<div className="sendbird-app__channellist-wrap">
<ChannelListPage />
</div>
</SendbirdProvider>
</div>
);
}
export default App;