> For the complete documentation index, see [llms.txt](https://search.docs.reactify.com.au/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://search.docs.reactify.com.au/components/suggestions.md).

# Suggestions

### Purpose

The Suggestions component is used to display a list of "did you mean" style suggestions within an instant search or similar area.

### Usage

{% tabs %}
{% tab title="Basic" %}

```tsx
import React from "react";
import { Suggestions } from "@usereactify/search";

import { ExampleSuggestions } from "./ExampleSuggestions";

export const Component: React.FC = () => {
  return (
    <Suggestions
      field="title"
      render={ExampleSuggestions}
    />
  );
};
```

{% endtab %}

{% tab title="ExampleSuggestions" %}

```tsx
import React from "react";

import { SuggestionsProps, useSearch } from "@usereactify/search";

export type ExampleSuggestionsProps = React.ComponentProps<
  NonNullable<SuggestionsProps["render"]>
>;

export const ExampleSuggestions: React.FC<ExampleSuggestionsProps> = (
  props
) => {
  const { setSearchTerm } = useSearch();

  return (
    <>
      <h3>Suggestions</h3>
      <ul>
        {props.suggestions.map((suggestion) => (
          <li onClick={() => setSearchTerm(suggestion.text)}>
            {suggestion.text}
          </li>
        ))}
      </ul>
    </>
  );
};

```

{% endtab %}
{% endtabs %}

### Props

```typescript
type SuggestionsProps = {
  /** The field which should be used for suggestions */
  field: "title";
  /** Render method */
  render?: React.FC<{
    suggestions: Array<{
      text: string;
    }>;
  }>;
};
```