# GiphyChip

`GiphyChip` renders a small chip-style indicator in the message input area when the Giphy command is active. It displays the command name (e.g., "GIPHY") with a lightning icon and a close button to dismiss the command.

Unlike most base UI components, `GiphyChip` is context-aware — it reads the active command from the `TextComposer` state via the `useMessageComposer` hook. Pressing the close button clears the command and restores the composer to its default state.

## Usage

`GiphyChip` is typically rendered automatically by the [`MessageComposer`](/chat/docs/sdk/react-native/ui-components/message-composer/) component when a Giphy command is active. You generally don't need to use it directly unless building a custom message input.

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

<GiphyChip />;
```

## Props

This component does not accept any props. It derives all data and behavior from:

| Source                 | Usage                                                                        |
| ---------------------- | ---------------------------------------------------------------------------- |
| `useMessageComposer()` | Access to `textComposer` for clearing the command and restoring the composer |
| `textComposer.state`   | Reads the active `command` to display the command name                       |
| Theme semantics        | `badgeBgInverse` for background, `textOnInverse` for text color              |


---

This page was last updated at 2026-04-17T17:33:46.438Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/giphy-chip/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/giphy-chip/).