> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# ShortCut Formatter

> Create custom text shortcuts for quick message composition by extending CometChatTextFormatter in React Native.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                                                                               |
  | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package        | `@cometchat/chat-uikit-react-native`                                                                                                                                                                |
  | Key class      | `CometChatTextFormatter` (abstract base class for custom formatters)                                                                                                                                |
  | Required setup | `CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`                                                                                                                             |
  | Purpose        | Create custom text shortcuts for quick message composition by extending CometChatTextFormatter                                                                                                      |
  | Extension      | Message Shortcuts extension must be enabled in [CometChat Dashboard](https://app.cometchat.com)                                                                                                     |
  | Sample app     | [GitHub](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/sample)                                                                                                                  |
  | Related        | [Mentions Formatter](/ui-kit/react-native/mentions-formatter-guide) · [Custom Text Formatter](/ui-kit/react-native/custom-text-formatter-guide) · [All Guides](/ui-kit/react-native/guide-overview) |
</Accordion>

## Overview

The `ShortCutFormatter` class extends the `CometChatTextFormatter` class to provide a mechanism for handling shortcuts within messages. This guide walks you through the process of using ShortCutFormatter to implement shortcut extensions in your CometChat application.

<Note>
  The Message Shortcuts extension must be enabled in your [CometChat Dashboard](https://app.cometchat.com) for this feature to work.
</Note>

***

## Setup

<Steps>
  <Step title="Create the ShortCutFormatter Class">
    Define the ShortCutFormatter class by extending the CometChatTextFormatter class:

    <Tabs>
      <Tab title="TypeScript">
        ```tsx theme={null}
        import { CometChat } from "@cometchat/chat-sdk-react-native";
        import {
          CometChatTextFormatter,
          SuggestionItem,
        } from "@cometchat/chat-uikit-react-native";

        export class ShortCutFormatter extends CometChatTextFormatter {
          constructor() {
            super();
            this.trackCharacter = "!"; // Character that triggers shortcut suggestions
          }
        }
        ```
      </Tab>

      <Tab title="JavaScript">
        ```jsx theme={null}
        import { CometChat } from "@cometchat/chat-sdk-react-native";
        import {
          CometChatTextFormatter,
          SuggestionItem,
        } from "@cometchat/chat-uikit-react-native";

        export class ShortCutFormatter extends CometChatTextFormatter {
          constructor() {
            super();
            this.trackCharacter = "!"; // Character that triggers shortcut suggestions
          }
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Override the search() Method">
    Override the `search()` method to fetch shortcuts based on the entered search text:

    <Tabs>
      <Tab title="TypeScript">
        ```tsx theme={null}
        search = (searchKey: string) => {
          CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
            .then((data: any) => {
              if (data && data?.shortcuts) {
                let suggestionData = Object.keys(data.shortcuts)
                  .filter((key) =>
                    searchKey
                      ? key.toLowerCase().includes(searchKey.toLowerCase())
                      : true
                  )
                  .map((key) => {
                    return new SuggestionItem({
                      id: key,
                      name: data.shortcuts[key],
                      promptText: data.shortcuts[key],
                      trackingCharacter: "!",
                      underlyingText: data.shortcuts[key],
                    });
                  });
                this.setSearchData(suggestionData);
              }
            })
            .catch((error) => {
              console.error("Error fetching shortcuts:", error);
            });
        };

        // Return null in fetchNext if there's no pagination
        fetchNext = () => {
          return null;
        };
        ```
      </Tab>

      <Tab title="JavaScript">
        ```jsx theme={null}
        search = (searchKey) => {
          CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
            .then((data) => {
              if (data && data?.shortcuts) {
                let suggestionData = Object.keys(data.shortcuts)
                  .filter((key) =>
                    searchKey
                      ? key.toLowerCase().includes(searchKey.toLowerCase())
                      : true
                  )
                  .map((key) => {
                    return new SuggestionItem({
                      id: key,
                      name: data.shortcuts[key],
                      promptText: data.shortcuts[key],
                      trackingCharacter: "!",
                      underlyingText: data.shortcuts[key],
                    });
                  });
                this.setSearchData(suggestionData);
              }
            })
            .catch((error) => {
              console.error("Error fetching shortcuts:", error);
            });
        };

        // Return null in fetchNext if there's no pagination
        fetchNext = () => {
          return null;
        };
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

***

## Usage

Initialize an instance of `ShortCutFormatter` and pass it to the message composer via the `textFormatters` prop:

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { View } from "react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import {
      CometChatMessageHeader,
      CometChatMessageList,
      CometChatMessageComposer,
    } from "@cometchat/chat-uikit-react-native";
    // Import your custom ShortCutFormatter class defined above
    import { ShortCutFormatter } from "./ShortCutFormatter";

    function ChatScreen(): React.JSX.Element {
      const [chatUser, setChatUser] = React.useState<CometChat.User | undefined>();

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const shortcutFormatter = React.useMemo(() => new ShortCutFormatter(), []);

      return (
        <>
          {chatUser && (
            <View style={{ flex: 1 }}>
              <CometChatMessageHeader user={chatUser} />
              <CometChatMessageList user={chatUser} />
              <CometChatMessageComposer
                user={chatUser}
                textFormatters={[shortcutFormatter]}
              />
            </View>
          )}
        </>
      );
    }

    export default ChatScreen;
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React, { useState, useEffect, useMemo } from "react";
    import { View } from "react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import {
      CometChatMessageHeader,
      CometChatMessageList,
      CometChatMessageComposer,
    } from "@cometchat/chat-uikit-react-native";
    // Import your custom ShortCutFormatter class defined above
    import { ShortCutFormatter } from "./ShortCutFormatter";

    function ChatScreen() {
      const [chatUser, setChatUser] = useState();

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const shortcutFormatter = useMemo(() => new ShortCutFormatter(), []);

      return (
        <>
          {chatUser && (
            <View style={{ flex: 1 }}>
              <CometChatMessageHeader user={chatUser} />
              <CometChatMessageList user={chatUser} />
              <CometChatMessageComposer
                user={chatUser}
                textFormatters={[shortcutFormatter]}
              />
            </View>
          )}
        </>
      );
    }

    export default ChatScreen;
    ```
  </Tab>
</Tabs>

***

## Result

When users type the trigger character (`!`), they'll see a list of available shortcuts to quickly insert predefined text.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/9bgr-iIAUJixmNKk/images/shortcut_formatter_cometchat_screens.png?fit=max&auto=format&n=9bgr-iIAUJixmNKk&q=85&s=a8074512bcf9ef64671a79dc47595a85" alt="ShortCut Formatter" width="658" height="688" data-path="images/shortcut_formatter_cometchat_screens.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Mentions Formatter" icon="at" href="/ui-kit/react-native/mentions-formatter-guide">
    Format and style @mentions in chat messages
  </Card>

  <Card title="Message Composer" icon="pen" href="/ui-kit/react-native/message-composer">
    Customize the message input component
  </Card>

  <Card title="All Guides" icon="book" href="/ui-kit/react-native/guide-overview">
    Browse all feature and formatter guides
  </Card>

  <Card title="Message List" icon="list" href="/ui-kit/react-native/message-list">
    Customize how messages are displayed
  </Card>
</CardGroup>