---
id: emoji_context
sidebar_position: 5
title: EmojiContext
---

:::caution
`EmojiContext` has been removed in version `11.0.0`, see related release guides ([Introducing new reactions](../../release-guides/upgrade-to-v11.mdx#introducing-new-reactions), [Dropping support for built-in `EmojiPicker`](../../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) and [Dropping support for built-in `EmojiIndex`](../../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex)) to adjust your integration to this new change.
:::

The `EmojiContext` is established by the `Channel` component and exposes the `useEmojiContext` hook. This context holds
the UI components and stateful data necessary to render emoji selector functionality.

## Basic Usage

Pull values from context with our custom hook:

```jsx
const { Emoji, emojiConfig } = useEmojiContext();
```

## Values

### Emoji

Custom UI component to override default `NimbleEmoji` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).

| Type      |
| --------- |
| component |

### emojiConfig

The configuration data for emojis, including the rendered JSON data set.

| Type        |
| ----------- |
| EmojiConfig |

### EmojiIndex

Custom class constructor to override default `NimbleEmojiIndex` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).

| Type        |
| ----------- |
| constructor |

### EmojiPicker

Custom UI component to override default `NimblePicker` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).

| Type      |
| --------- |
| component |
