---
url: https://talkjs.com/docs/UI_Components/Theme/Theme_components/GlobalSearchResultItem
title: '<GlobalSearchResultItem>'
minidoc-source: js
minidoc-lib: components
---

> Note: The search functionality is only available on the TalkJS Growth plan and above.

The `<GlobalSearchResultItem>` component is displayed for each match found by the search functionality.

## GlobalSearchResultItemProps
export declare interface GlobalSearchResultItemProps  {
/** A collection of objects which are passed to all GlobalSearchResultItem theme components. */
common: CommonConversationListProps;
/** The conversation that's being displayed. */
conversation: ConversationSnapshot;
/** If `true`, this search result is the currently selected one. */
isSelected: boolean;
/** The message containing the result item. If it's missing, then the search match is on the conversation itself. */
message?: MessageSnapshot;
}

## Example

In the default theme, the `<GlobalSearchResultItem>` component is implemented as follows:

```js
import { html, useParticipants, Highlightable } from "@talkjs/react-components";
/** @import { GlobalSearchResultItemProps } from "@talkjs/react-components"; */

/** @param {GlobalSearchResultItemProps} props */
export function GlobalSearchResultItem(props) {
  const { common, conversation, message, isSelected } = props;
  const { currentUser, theme, conversationList } = common;
  const { TimeAgo, ConversationImage, CompactMessageContent } = theme;

  const participants = useParticipants(conversation.id, 10);

  const isGroupChat = participants.length >= 3;
  const senderName = message?.sender?.name;
  const timestamp = message?.editedAt ?? message?.createdAt;

  const otherParticipants = participants.filter(
    (participant) => participant.user.id !== currentUser.id,
  );

  const participantsInSubject = otherParticipants.length
    ? otherParticipants
    : participants;

  const subject =
    conversation.subject ??
    participantsInSubject
      .map((participant) => participant.user.name)
      .join(", ");

  const selectResult = () => {
    conversationList.selectConversation(conversation.id, message?.id);
  };

  return html`
    <div
      className="t-theme-global-search-result-item"
      t-selected=${isSelected ? "" : undefined}
      onClick=${selectResult}
    >
      <${ConversationImage}
        conversation=${conversation}
        participants=${participants}
        common=${common}
      />

      <div className="t-inner">
        <div className="t-header">
          <div className="t-conversation-name">
            <${Highlightable} text=${subject} />
          </div>

          ${timestamp &&
          html`
            <span className="t-timestamp">
              <${TimeAgo} timestamp=${timestamp} common=${common} />
            </span>
          `}
        </div>

        <div className="t-body">
          ${message &&
          html`
            <div className="t-message">
              ${isGroupChat &&
              senderName &&
              html`<span className="t-message-sender">
                <${Highlightable} text=${senderName} />:
              </span>`}
              <${CompactMessageContent} message=${message} common=${common} />
            </div>
          `}
        </div>
      </div>
    </div>
  `;
}
```