ChannelMemberListContext

ChannelMemberListContext is provided by ChannelMemberListProvider. Mount the provider around your member-list UI to access the search source used to query and paginate its members. If you are not familiar with the React Context API, see the React docs.

ChannelMemberListProvider takes the channel it operates on as a prop. In the channel-details flow, the ChannelMemberList component renders the provider and reads that channel from ChannelDetailsContext, so nested components don't need it via props.

Best Practices

• Render ChannelMemberListProvider with the channel whose members you want to list — inside the channel-details flow this comes from ChannelDetailsContext.
• Use searchSource for querying and paginating members; it is pre-configured to autocomplete by name.
• Pass a custom searchSource only when you need different filtering, sorting, or page size — otherwise rely on the default the provider creates.
• Calling useChannelMemberListContext outside the provider throws — render your member-list UI as a child of ChannelMemberListProvider.

Basic Usage

Wrap your member-list UI in ChannelMemberListProvider:

import { ChannelMemberListProvider } from "stream-chat-react-native";

<ChannelMemberListProvider channel={channel}>
  {/* member list UI */}
</ChannelMemberListProvider>;

Consume ChannelMemberListContext in any child of the provider:

import { useContext } from "react";
import { ChannelMemberListContext } from "stream-chat-react-native";

const { searchSource } = useContext(ChannelMemberListContext);

Alternatively, use the useChannelMemberListContext hook to consume ChannelMemberListContext.

import { useChannelMemberListContext } from "stream-chat-react-native";

const { searchSource } = useChannelMemberListContext();

Values