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 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.
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 title 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;
The body of the channel settings screen contains a list of menu items. You can customize the menu items by rendering your own components through the renderMenuItems function.
The menu item list differs by user role: operators and regular users. The following example demonstrates how to add a menu item menu1 to both operator and non-operator roles.
import React, { useState } from "react";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import ChannelSettings from "@sendbird/uikit-react/ChannelSettings";
import useMenuList from "@sendbird/uikit-react/ChannelSettings/hooks/useMenuList";
import GroupChannelList from "@sendbird/uikit-react/GroupChannelList";
import GroupChannelPage from "@sendbird/uikit-react/GroupChannel";
import { MenuListByRole } from "@sendbird/uikit-react/ChannelSettings/components/ChannelSettingMenuList";
import { IconTypes } from "@sendbird/uikit-react/ui/Icon";
import "@sendbird/uikit-react/dist/index.css";
const CustomModerationPanel = ({ channelUrl }) => {
const menuItems = useMenuList({});
const customMenuItems = {
operator: {
// List menu items in the order of appearance.
// The default set of menu items can be found in the `useMenuList` hook:
// https://github.com/sendbird/sendbird-uikit-react/blob/main/src/modules/ChannelSettings/components/ChannelSettingsUI/hooks/useMenuItems.tsx#L73
// You can add or remove other menu items like menu1.
...menuItems.operator,
menu1: {
...menuItems.operator.operators,
icon: {
...menuItems.operator.operators.icon,
type: IconTypes.CAMERA,
},
label: {
...menuItems.operator.operators.label,
children: "PICTURE",
},
accordionComponent: () => {
return null
},
rightComponent: () => {
return null
}
},
},
nonOperator: {
// List menu items in the order of appearance.
// You can add or remove other menu items like menu1.
menu1: {
icon: {
...menuItems.nonOperator.allUsers.icon,
type: IconTypes.FREEZE,
},
label: {
...menuItems.nonOperator.allUsers.label,
children: "FREEZE",
},
},
...menuItems.nonOperator,
},
};
return <MenuListByRole menuItems={customMenuItems} />;
};
function App() {
const [channel, setChannel] = useState(undefined);
const handleSetChannel = (channel) => {
setChannel(channel);
};
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",
flexDirection: "row",
}}
>
<SendbirdProvider
appId={"YOUR_APP_ID"}
userId={"USER_ID"}
breakpoint={false}
>
<GroupChannelList
onChannelCreated={handleSetChannel}
onChannelSelect={handleSetChannel}
/>
<GroupChannelPage channelUrl={channel?.url ?? ""} />
<ChannelSettings
channelUrl={channel?.url ?? ""}
renderModerationPanel={() => <>{/* Implement your custom ChannelSettingsUI component here. You can try using the <CustomModerationPanel /> provided above as an example. */}</>}
/>
</SendbirdProvider>
</div>
);
}
export default App;
Among the menu items, the member list is a common feature that you might want to customize. You can customize the context menu items for each member by rendering your own components through the renderUserListItem function.
The following example demonstrates how to add a new menu item to the context menu list.
import React, { useState } from "react";
import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import ChannelSettings from "@sendbird/uikit-react/ChannelSettings";
import useMenuList from "@sendbird/uikit-react/ChannelSettings/hooks/useMenuList";
import GroupChannelList from "@sendbird/uikit-react/GroupChannelList";
import GroupChannelPage from "@sendbird/uikit-react/GroupChannel";
import { MenuListByRole } from "@sendbird/uikit-react/ChannelSettings/components/ChannelSettingMenuList";
import MenuList from '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingMenuList';
import UserListItem from '@sendbird/uikit-react/ui/UserListItem';
import { UserListItemMenu } from '@sendbird/uikit-react/ui/UserListItemMenu';
import { IconTypes } from "@sendbird/uikit-react/ui/Icon";
import "@sendbird/uikit-react/dist/index.css";
const CustomModerationPanel = ({ channelUrl }) => {
const menuItems = useMenuList({});
const customMenuItems = {
operator: {
// List menu items in the order of appearance.
// The default set of menu items can be found in the `useMenuList` hook:
// https://github.com/sendbird/sendbird-uikit-react/blob/main/src/modules/ChannelSettings/components/ChannelSettingsUI/hooks/useMenuItems.tsx#L73
// You can add or remove other menu items like menu1.
...menuItems.operator,
menu1: {
...menuItems.operator.operators,
icon: {
...menuItems.operator.operators.icon,
type: IconTypes.CAMERA,
},
label: {
...menuItems.operator.operators.label,
children: "PICTURE",
},
accordionComponent: () => {
return null
},
rightComponent: () => {
return null
}
},
},
nonOperator: {
// List menu items in the order of appearance.
// You can add or remove other menu items like menu1.
menu1: {
icon: {
...menuItems.nonOperator.allUsers.icon,
type: IconTypes.FREEZE,
},
label: {
...menuItems.nonOperator.allUsers.label,
children: "FREEZE",
},
},
...menuItems.nonOperator,
},
};
return <MenuListByRole menuItems={customMenuItems} />;
};
function App() {
const [channel, setChannel] = useState(undefined);
const handleSetChannel = (channel) => {
setChannel(channel);
};
return (
<div
style={{
width: "100vw",
height: "100vh",
display: "flex",
flexDirection: "row",
}}
>
<SendbirdProvider
appId={"YOUR_APP_ID"}
userId={"USER_ID"}
breakpoint={false}
>
<GroupChannelList
onChannelCreated={handleSetChannel}
onChannelSelect={handleSetChannel}
/>
<GroupChannelPage channelUrl={channel?.url ?? ""} />
<ChannelSettings
channelUrl={channel?.url ?? ""}
renderModerationPanel={() => <>{/* Implement your custom ChannelSettingsUI component here. You can try using the <CustomModerationPanel /> provided above as an example. */}</>}
renderUserListItem={(props) => (
<UserListItem
{...props}
key={props?.user?.userId}
renderListItemMenu={(props) => (
<UserListItemMenu
{...props}
renderMenuItems={({ items }) => {
const {
OperatorToggleMenuItem,
MuteToggleMenuItem,
BanToggleMenuItem,
} = items;
return (
<>
<OperatorToggleMenuItem />
<MuteToggleMenuItem />
<BanToggleMenuItem />
<div style={{ color: "#000000" }}>NEW MENU ITEM</div>
</>
);
}}
/>
)}
/>
)}
/>
</SendbirdProvider>
</div>
);
}
export default App;