You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This example will focus on the specific use case where there are two `ChannelList` components in the same application.
8
+
9
+
The event listeners of both lists, let's say A and B, will pick up all `new.message` events for every channel, regardless of which list the `message` is sent in. If a message is sent in list B, the event listener in list A will also pick up the new `message` and bump the impacted `channel` to the top of the list. This is not the desired result for multiple lists, but there is a correct way to handle the routing of these messages.
10
+
11
+
## channelRenderFilterFn prop
12
+
13
+
The reason that a channel will automatically be bumped to the top of a list even though it's not part of the list is due to the default behavior. The ChannelList components will retrieve a channel from `client.activeChannels` if the channel doesn't already exist.
14
+
15
+
By using the `channelRenderFilterFn` prop we can apply custom filtering logic to the list of channels that are rendered. Since we have access to the entire channel object, we can filter on type, custom fields, or others.
Copy file name to clipboardExpand all lines: package/src/components/ChannelList/ChannelList.tsx
+6-1Lines changed: 6 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -61,6 +61,10 @@ export type ChannelListProps<
61
61
|'numberOfSkeletons'
62
62
>
63
63
>&{
64
+
/** Optional function to filter channels prior to rendering the list. Do not use any complex logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
0 commit comments