How to hide "top-right icon on the header" of ChannelList & Channel

Sendbird Chat UIKit React
,
1

Hi, I just started to use sendbird with the version below.
“sendbird”: “^3.0.148”,
“sendbird-uikit”: “^2.2.1”,

My Question is…
How to hide “top-right icon on the header” of ChannelList & Channel?
image
image

I want to add custom buttons, but even though I render header as “null”, it still shows the icon.

In the ChannelProps, it has “onChatHeaderActionClick” but not about showDefaultActionIcon like “showSearchIcon”.
Is there any way to hide them?

2

@Oscar_YMYD,

Welcome to the Sendbird community. I apologize that its taken me so long to respond to your inquiry.

Setting the renderChatHeader to null would cause the default chat header to render (reference).

In order to hide the button, you would need to render out your own version of the header.

We recently open sourced our UIKit giving you full insight into how the UIKit operates. You could take a look at how we render out the header (reference) and create your own instance of it to pass into to therenderChatHeader prop. Alternatively, you could fork the UIKit and make the changes to the core configuration.

For the channelList header, you would need to fork the UIKit and implement your own version of the channelList as it does not accept a prop to alter its render.

Please don’t hesitate to let me know if you have any additional questions or concerns.

Thanks,
Tyler

1 Like
3

This is a bit of a hack but in order to hide this top-right icon for starting conversations, I am removing the element with that class name. This is just a workaround until I can make a fully custom header.

useEffect(() => {
  somecondition && removeElementsByClass('sendbird-channel-header__right-icon');
}, [])

export const removeElementsByClass = className => {
  const elements = document.getElementsByClassName(className);
  Array.from(elements).forEach(el => el.parentNode.removeChild(el));
};
3 Likes
4

Thanks for your reply. I checked that I can render ChatHeader.

Now, I’m trying to fork UIKit. Is there any guide for that?
There are 2 repos.

I tried to following steps with sendbird-uikit-react-sources but there’s build errors (type error)

  1. fork branch
  2. change package.json file to
    dependencies : {…
    “sendbird-uikit”: “https://github.com/{MyID}/sendbird-uikit”,
    “scripts”: {…
    “postinstall”: “cd ./node_modules/sendbird-uikit && npm install && npm run build”
  3. run “npm i”
    =>
    [!] (plugin typescript) Error: @rollup/plugin-typescript TS2345: Argument of type ‘{ channelUrl: string; messageTimestampFrom: number; limit: number; reverse: boolean; exactMatch: boolean; channelCustomType: string; messageTimestampTo: number; order: “ts” | “score”; }’ is not assignable to parameter of type ‘MessageSearchQueryOptions’.
    Type ‘{ channelUrl: string; messageTimestampFrom: number; limit: number; reverse: boolean; exactMatch: boolean; channelCustomType: string; messageTimestampTo: number; order: “ts” | “score”; }’ is missing the following properties from type ‘MessageSearchQueryOptions’: advancedQuery, targetFields
    src/smart-components/MessageSearch/hooks/useGetSearchedMessages.ts (39:73)

39 const createdQuery = sdk.createMessageSearchQuery(searchString, inputSearchMessageQueryObject);

I tried to fix this, then another type error occurs.
Is there any simple way to folk UI Kit?

5

Hi @Oscar_YMYD,

One thing I’d like to point out prior to providing any recommendations is that we only recommend utilizing the open source repo when you’re looking to do some very heavy customization. Once you start customizing the UIKit using the open source version, our ability to support you becomes limited.

You can not simply fork the open source repo, and install it. The open source repo needs to be built and bundled in order for you to utilize it. Those instructions are included in the README of the open source repo.

6

Hi @Tyler Thank you for your reply.
I agree with you. I don’t need a big change, I have just a little ui issue. And of course, I need Sendbird’s support until my in app chatting is set up stably.

Back to this root question, I need a little ui change about removing Channel List default icon.
What can be the best solution you recommend?

  1. John_Ottenlips’s solution (removing the element with class name)
  2. folk ui kit and fix → build → bundled in my project
  3. manually change node_modules/CheannelList.js
    (by removing
    , React.createElement(“div”, {
    className: “sendbird-channel-header__right-icon”
    }, iconButton)
    in function ChannelHeader)
  4. build my own channel list.

Because our service is designed not to make chat directly to user, but make base on topic they are looking, I have to remove that Icon.
Would you guide me, please?

1 Like
7

hi did u achevied this ui change i am also looking for to disable or remove create channel icon