From 7e938c1030d3fd8fea19dcaa5a91f3ad960ff467 Mon Sep 17 00:00:00 2001 From: martincupela Date: Mon, 6 Jul 2026 12:44:55 +0200 Subject: [PATCH] feat: allow to customize ChannelListHeader --- src/components/ChannelList/ChannelList.tsx | 3 ++- src/context/ComponentContext.tsx | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx index b3e8153db..714fce3c6 100644 --- a/src/components/ChannelList/ChannelList.tsx +++ b/src/components/ChannelList/ChannelList.tsx @@ -39,7 +39,7 @@ import { import { moveChannelUpwards } from './utils'; import type { TranslationContextValue } from '../../context/TranslationContext'; import type { PaginatorProps } from '../../types/types'; -import { ChannelListHeader } from './ChannelListHeader'; +import { ChannelListHeader as DefaultChannelListHeader } from './ChannelListHeader'; import { useStableId } from '../UtilityComponents/useStableId'; const DEFAULT_FILTERS = {}; @@ -194,6 +194,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => { useImageFlagEmojisOnWindows, } = useChatContext('ChannelList'); const { + ChannelListHeader = DefaultChannelListHeader, ChannelListUI = DefaultChannelListUI, NotificationList = DefaultNotificationList, Search = DefaultSearch, diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx index 787f76c6e..ae6c5fb70 100644 --- a/src/context/ComponentContext.tsx +++ b/src/context/ComponentContext.tsx @@ -113,6 +113,8 @@ export type ComponentContextValue = { CalloutDialog?: React.ComponentType; /** Custom UI component shown instead of the image when it fails to load, defaults to and accepts same props as: [ImagePlaceholder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/BaseImage/ImagePlaceholder.tsx) */ ImagePlaceholder?: React.ComponentType; + /** Custom UI component to display the header of the `ChannelList`, defaults to and accepts same props as: [ChannelListHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListHeader.tsx) */ + ChannelListHeader?: React.ComponentType; /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListUI.tsx) */ ChannelListUI?: React.ComponentType; /** Custom UI component to display set of action buttons within `ChannelListItemUI` component, accepts same props as: [ChannelListItemActionButtons](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListItemActionButtons.tsx) */