# useSearch

### Purpose

The useSearch hook exposes methods and data for updating and submitting search terms, internally it is used by the [Search component](https://search.docs.reactify.com.au/components/search).

### Usage

The `searchTerm` field is the current search term value.

The `setSearchTerm` method is used to change the current search term value.

The `submitSearchTerm` method is used to navigate to the search page, if there are redirects configured for the current search term they will be followed.

The `submitSearchQuery` method is used to query products directly using the [OpenSearch Query DSL](https://opensearch.org/docs/latest/query-dsl/), this method is detached from the rest of the search experience.

The `showInstantSearchResults` is used to determine if instant search results should be displayed, e.g. you should show or hide the instant search experience based on this value.

The `setShowInstantSearchResults` method is used to change the `showInstantSearchResults` field value.

The `searchRedirect` field will contain a Redirect if the current search term matches a redirect.

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

<pre class="language-tsx"><code class="lang-tsx"><strong>import React from "react";
</strong>import { useSearch } from "@usereactify/search";

export const ExampleHookUseSearch: React.FC = () => {
  const searchHook = useSearch();

  const handleFormSubmit = React.useCallback((event: React.FormEvent&#x3C;HTMLFormElement>) => {
    searchHook.submitSearchTerm();
  }, [searchHook.submitSearchTerm]);

  const handleInputChange = React.useCallback((event: React.ChangeEvent&#x3C;HTMLInputElement>) => {
    searchHook.setSearchTerm(event.target.value);
  }, [searchHook.setSearchTerm]);

  return (
    &#x3C;form
      onSubmit={handleFormSubmit}
    >
      &#x3C;input
        type="text"
        value={searchHook.searchTerm}
        onChange={handleInputChange}
      />
    &#x3C;/form>
  );
};
</code></pre>

{% endtab %}

{% tab title="ExampleSubmitSearchQuery" %}
Visit the OpenSearch Query DSL documentation for more information

[https://opensearch.org/docs/2.6/query-dsl](https://opensearch.org/docs/2.6/query-dsl/)

```tsx
const searchHook = useSearch();

const results = await searchHook.submitSearchQuery({
  query: {
    term: {
      "collection_handles.keyword": "jumpers"
    },
  },
});
```

{% endtab %}
{% endtabs %}

### Signature

```typescript
(): {
  /** The current search term */
  searchTerm: string;
  /** Function for changing the current search term */
  setSearchTerm: (searchTerm?: string) => void;
  /** Function for navigating to the search page, includes logic for redirects */
  submitSearchTerm: (searchTerm?: string) => void;
  /** Function for retrieving search results for an opensearch query */
  submitSearchQuery: (searchBody: any, searchHeaders: Record<string, string>) => Promise<{
    results: Array<Product>;
    resultStats: {
      time: number;
      numberOfResults: number;
      displayedResults: number;
    };
  }>;
  /** Used to determine if instant search results should be displayed */
  showInstantSearchResults: boolean;
  /** Used to manually set the "showInstantSearchResults" value */
  setShowInstantSearchResults: React.Dispatch<React.SetStateAction<boolean>>;
  /** Contains any matching redirect for the current search term */
  searchRedirect: {
    id: string;
    url: string;
    query: string;
  } | undefined;
};
```