Hello, I am trying to get rid of the searchIcon button in the ChannelListHeader. As I understand it, I can pass in a custom component into the renderIconButton.
rednerIconButton={()=> }
When I do this, my button appears on top of the default serachIcon button instead of replacing it. Am I missing something?
// What version of the SDK are you using?
“@sendbird/uikit-react”: “^3.2.6”,
[Reproduction Steps]
<ChannelListProvider>
<ChannelListUI
queries={queries}
isTypingIndicatorEnabled={true}
onChannelSelect={(e) => setCurrentChannel(e.url)}
renderHeader={() => (
<ChannelListHeader
renderHeader={() => <div>Channels</div>}
renderIconButton={() => <Button><AddCommentIcon /></div>}
/>
)}
/>
</ChannelListProvider>
// How is this currently impacting your implementation?
In our current implementation, we don’t want certain people to be searchable so we have implemented our own API to search for users. I want to attach our own modal to the button for searching users.
@Alex_Maldonado Hello.
Can I know the exact contents of the code below?
Hi @Yongjun_Choi This is the entire component.
The Button and AddCommentIcon are components from the Material Ui Library.
I changed the code slightly from the example above. For some reason the example above it not working properly so I switched the ChannelListUI out for the ChannelList component. But the same issue is happening with the searchIcon button.
Bellow the code I have attached an image of what the button looks like.
const Chat = () => {
const [session, loading] = useSession();
const dispatch = useDispatch();
const darkMode = useMediaQuery('(prefers-color-scheme: dark)');
const [showSettings, setShowSettings] = useState(false);
const [openSearch, setOpenSearch] = useState(false);
const { chatOpen, sendbirdAccessToken, sendbirdUserId } = useSelector(
(store) => store.chat
);
const [currentChannel, setCurrentChannel] = useState(null);
const [queries] = useState({
channelListQuery: {
includeEmpty: true,
limit: 50,
order: 'chronological',
},
applicationUserListQuery: {
limit: 50,
},
});
const theme = darkMode ? 'dark' : 'light';
if (!loading && !session) return <Unauthorized />;
const logout = () => {
dispatch(sendbirdLogout());
};
if (!chatOpen) {
return <Login />;
}
return (
<Page>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
padding: '10px',
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h4">Sandals Church Chat</Typography>
</Box>
<Button onClick={logout} color="error">
Sign Out
</Button>
</Box>
<Box
sx={{
display: 'flex',
height: '70vh',
position: 'relative',
backgroundColor: 'red',
}}
>
<SendbirdProvider
theme={theme}
appId={sendbirdappId}
userId={sendbirdUserId}
accessToken={sendbirdAccessToken}
allowProfileEdit={false}
>
<Box sx={{ display: 'flex', width: '100%' }}>
<Box>
<ChannelListProvider>
<ChannelList
queries={queries}
isTypingIndicatorEnabled={true}
onChannelSelect={(e) => setCurrentChannel(e.url)}
renderHeader={() => (
<ChannelListHeader
renderIconButton={() => (
<Button color="blue">
<AddCommentIcon />
</Button>
)}
/>
)}
/>
</ChannelListProvider>
</Box>
<Box sx={{ flexGrow: 1 }}>
<Channel
channelUrl={currentChannel}
onChatHeaderActionClick={() => {
setShowSettings(true);
}}
/>
</Box>
{showSettings && (
<Box>
<ChannelSettings
channelUrl={currentChannel}
onCloseClick={() => {
setShowSettings(false);
}}
/>
</Box>
)}
</Box>
</SendbirdProvider>
</Box>
</Page>
);
};
export default Chat;
@Alex_Maldonado Hi, you mean add channel button right?
I am checking it with the UIKit engineer and will get back to here again.
thanks.
@Yongjun_Choi correct. I would like to add my own channel button to handle a different function. Thank you!
@Alex_Maldonado
The development team will modify it and distribute it to the next release version.
Then you will be able to change the button.
Please wait a little bit.
Thanks.
1 Like
@Yongjun_Choi This is amazing! I currently have a workout around in the mean time but I look forward to the update. Thank you so much!
@Alex_Maldonado
UIKit React v3.3.2 has been released, please check with this version.
thanks.
Just tried it out. This works great. Thank you so much for the speedy release!
how do i add search for channel
