> ## 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

> ShortCut Formatter — CometChat integration guide.

## Introduction

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

## Setup

1. **Create the ShortCutFormatter Class**: Define the ShortCutFormatter class by extending the CometChatTextFormatter class.

<Tabs>
  <Tab title="TypeScript">
    ```ts 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 = "!";
      }
    }
    ```
  </Tab>
</Tabs>

2. **Override Search Method**: Override the search() method to search for shortcuts based on the entered search text.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    search = (searchKey: string) => {
      let data: Array<SuggestionItem> = [];

      CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
        .then((data: any) => {
          if (data && data?.shortcuts) {
            let suggestionData = Object.keys(data.shortcuts).map((key) => {
              return new SuggestionItem({
                id: key,
                name: data.shortcuts[key],
                promptText: data.shortcuts[key],
                trackingCharacter: "!",
                underlyingText: data.shortcuts[key],
              });
            });
            this.setSearchData(suggestionData); // setting data in setSearchData();
          }
        })
        .catch((error) => {
          // Some error occured
        });

      this.setSearchData(data);
    };

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

## Usage

1. **Initialization**: Initialize an instance of `ShortCutFormatter` in your application.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import {
      CometChatMessages,
      CometChatMentionsFormatter,
    } from "@cometchat/chat-uikit-react-native";

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

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

      const shortcutFormatter = new ShortCutFormatter();

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageComposerConfiguration={{ textFormatters: [shortcutFormatter] }}
            />
          )}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

## Example

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/05765721-shortcutFormatter_cometchat_screens-517c2c6a37bba5955dbe20bd90ef0be8.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=deabb1aeca5398f52579c78de8919780" alt="Image" width="4498" height="3120" data-path="images/05765721-shortcutFormatter_cometchat_screens-517c2c6a37bba5955dbe20bd90ef0be8.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/3e9305c0-shortcutFormatter_cometchat_screens-aaf76ef5aa3891a74e6aaa9d68635386.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=587095e4bef912467f537c5b65fd0343" alt="Image" width="4498" height="3120" data-path="images/3e9305c0-shortcutFormatter_cometchat_screens-aaf76ef5aa3891a74e6aaa9d68635386.png" />
  </Tab>
</Tabs>