# 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](https://reactjs.org/docs/context.html).

`ChannelMemberListProvider` takes the `channel` it operates on as a prop. In the channel-details flow, the [`ChannelMemberList`](/chat/docs/sdk/react-native/ui-components/channel-member-list/) component renders the provider and reads that `channel` from [`ChannelDetailsContext`](/chat/docs/sdk/react-native/contexts/channel-details-context/), 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`](/chat/docs/sdk/react-native/contexts/channel-details-context/).
- 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`:

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

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

Consume `ChannelMemberListContext` in any child of the provider:

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

const { searchSource } = useContext(ChannelMemberListContext);
```

Alternatively, use the `useChannelMemberListContext` hook to consume `ChannelMemberListContext`.

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

const { searchSource } = useChannelMemberListContext();
```

## Values

| Value             | Description                                                                                                                                                                                                                      | Type                                                                                                            |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| `searchSource` \* | A [`ChannelMemberSearchSource`](https://github.com/GetStream/stream-chat-js/blob/master/src/search_controller.ts) used to query and paginate the channel's members. Pre-configured to autocomplete by `name` and sorted by name. | [`ChannelMemberSearchSource`](https://github.com/GetStream/stream-chat-js/blob/master/src/search_controller.ts) |


---

This page was last updated at 2026-06-30T12:00:26.191Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/contexts/channel-member-list-context/](https://getstream.io/chat/docs/sdk/react-native/contexts/channel-member-list-context/).