---
id: channel-context
title: ChannelContext
---

import Channel from '../common-content/core-components/channel/props/channel.mdx';
import EnforceUniqueReaction from '../common-content/core-components/channel/props/enforce_unique_reaction.mdx';
import HideDateSeparators from '../common-content/core-components/channel/props/hide_date_separators.mdx';
import HideStickyDateHeader from '../common-content/core-components/channel/props/hide_sticky_date_header.mdx';
import MaxTimeBetweenGroupedMessages from '../common-content/core-components/channel/props/max_time_between_grouped_messages.mdx';
import ReadEventsEnabled from '../common-content/core-components/channel/props/read_events_enabled.mdx';
import TypingEventsEnabled from '../common-content/core-components/channel/props/typing_events_enabled.mdx';
import EmptyStateIndicator from '../common-content/core-components/channel/props/empty_state_indicator.mdx';
import LoadingIndicator from '../common-content/core-components/channel/props/loading_indicator.mdx';
import NetworkDownIndicator from '../common-content/core-components/channel/props/network_down_indicator.mdx';

import Disabled from '../common-content/contexts/channel-context/disabled.mdx';
import Members from '../common-content/contexts/channel-context/members.mdx';
import ScrollToFirstUnreadThreshold from '../common-content/contexts/channel-context/scroll_to_first_unread_threshold.mdx';
import Watchers from '../common-content/contexts/channel-context/watchers.mdx';

`ChannelContext` is provided by [`Channel`](../core-components/channel.mdx) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).

## Basic Usage

`ChannelContext` can be consumed by any of the child  component of `Channel` component as following:

```tsx
import { useContext } from 'react';
import { ChannelContext } from 'stream-chat-react-native';

const { lastRead, reloadChannel, watcherCount } = useContext(ChannelContext);
```

Alternatively, you can also use `useChannelContext` hook provided by library to consume ChannelContext.

```tsx
import { useChannelContext } from 'stream-chat-react-native';

const { lastRead, reloadChannel, watcherCount } = useChannelContext();
```

:::caution
We don't recommend using `ChannelContext` at message level, since changes to its value may result in re-rendering of all the messages. And this can introduce performance issue
:::

## Value

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#channel)_ props</div> channel {#channel}

<Channel />

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#enforceuniquereaction)_ props</div> enforceUniqueReaction {#enforceuniquereaction}

<EnforceUniqueReaction />

### disabled

<Disabled />

### error

True if any api call to `channel.query()` during first load or pagination fails.

| Type |
| - |
| boolean |

### giphyEnabled

True if giphy command is enabled on [channel type](https://getstream.io/chat/docs/javascript/channel_features/?language=javascript&q=command#edit-a-channel-type).

| Type |
| - |
| boolean |

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#hidedateseparators)_ props</div> hideDateSeparators {#hidedateseparators}

<HideDateSeparators />

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#hidestickydateheader)_ props</div> hideStickyDateHeader {#hidestickydateheader}

<HideStickyDateHeader />

### isAdmin

True if current user (connected to chat client) has `admin` role on application level or channel level. Please read more about [User Roles](https://getstream.io/chat/docs/javascript/channel_user_role/) for details.

```tsx
const isAdmin = client?.user?.role === 'admin' || channel?.state.membership.role === 'admin';

```
| Type |
| - |
| boolean |

### isModerator

True if current user (connected to chat client) has `moderator` role on application level or channel level. Please read more about [User Roles](https://getstream.io/chat/docs/javascript/channel_user_role/) for details.

```tsx
const isModerator = channel?.state.membership.role === 'channel_moderator' || channel?.state.membership.role === 'moderator';
```

| Type |
| - |
| boolean |

### isOwner

True if current user (connected to chat client) has `owner` level permissions for current channel type. Please read [User Permission](https://getstream.io/chat/docs/javascript/chat_permission_policies/) section for details.

```tsx
const isOwner = channel?.state.membership.role === 'owner';
```

| Type |
| - |
| boolean |

### lastRead

<!-- TODO: Change to new docs -->
Timestamp of when current user marked the channel as read - [`channel.markRead()`](https://getstream.io/chat/docs/javascript/unread/?language=javascript&q=markRead)

| Type |
| - |
| [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) |

### loadChannelAtMessage

Function to reload channel at particular message in history.

```tsx
loadChannelAtMessage({
  before: 10, // Number of messages to load before messageId
  after: 10, // Number of messages to load after messageId
  messageId
})
```

| Type |
| - |
| function |

### loading

True if channel is loading messages during first load.

| Type |
| - |
| boolean |

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#loadingindicator)_ props</div> LoadingIndicator {#loadingindicator}

<LoadingIndicator />

### markRead

<!-- TODO: Change to new docs -->
Function to mark current channel as read, for current user. This function internally makes a throttled call to `channel.markRead()`, if [read events](https://getstream.io/chat/docs/javascript/channel_features/?language=javascript&q=read%20event) are enabled

| Type |
| - |
| function |

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#maxtimebetweengroupedmessages)_ props</div> maxTimeBetweenGroupedMessages {#maxtimebetweengroupedmessages}

<MaxTimeBetweenGroupedMessages />

### members

<Members />

### read

<!-- TODO: Change to new docs -->
Read statuses of members of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=members) or [`channel.watch()`](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript&q=members) api call.

```tsx
Record<
  string, // userId
  {
    last_read: Date;
    user: UserResponse<UserType>
  }
>;
```

| Type |
| - |
| object |

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#readeventsenabled)_ props</div> readEventsEnabled {#readeventsenabled}

<ReadEventsEnabled />

### reloadChannel

Function to reload a channel at most recent message. Promise returned by this function will be resolved, when the channel has finished reloading.

| Type |
| - |
| () => Promise |

### scrollToFirstUnreadThreshold

<ScrollToFirstUnreadThreshold />

### setLastRead

Setter function for react state [`lastRead`](#lastread) of Channel component.

| Type |
| - |
| `(date: Date) => void` |

### setTargetedMessage

Setter function for react state [`targetedMessage`](#targetedmessage) of Channel component

| Type |
| - |
| `(messageId: string) => void` |

### targetedMessage

Id of message, which is highlighted currently. This value gets set when you load a channel at particular message in history, using [loadChannelAtMessage](#loadchannelatmessage).

| Type |
| - |
| string |

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#typingeventsenabled)_ props</div> typingEventsEnabled {#typingeventsenabled}

<TypingEventsEnabled />

### watchers

<Watchers />

### watcherCount

Total number of users, currently watching a channel.

| Type |
| - |
| number |

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#emptystateindicator)_ props</div> EmptyStateIndicator {#emptystateindicator}

<EmptyStateIndicator />

### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#networkdownindicator)_ props</div> NetworkDownIndicator {#networkdownindicator}

<NetworkDownIndicator />

<!-- - [StickyHeader](../core-components/channel.mdx#stickyheader) -->