> 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/search.md).

# Search

### Purpose

The Search component is a wrapper for the [useSearch hook](/hooks/usesearch.md), it provides a simple way to access and update the search terms while also handling special logic such as redirects.

### Usage

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

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

import { ExampleSearch } from "./ExampleSearch";

export const Component: React.FC = () => {
  return (
    <Search
      render={ExampleSearch}
    />
  );
};
```

{% endtab %}

{% tab title="ExampleSearch" %}

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

export type ExampleSearchProps = React.ComponentProps<
  NonNullable<SearchProps["render"]>
>;

export const ExampleSearch: React.FC<ExampleSearchProps> = (props) => {
  const handleFormSubmit = React.useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      props.submitSearchTerm();
    },
    [props.submitSearchTerm]
  );

  const handleInputChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      props.setSearchTerm(event.target.value);
    },
    [props.setSearchTerm]
  );

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type="search"
        placeholder="Search products..."
        value={props.searchTerm}
        onChange={handleInputChange}
      />
    </form>
  );
};
```

{% endtab %}
{% endtabs %}

### Props

```typescript
type SearchProps = {
  /** Render method */
  render?: React.FC<ReturnType<typeof useSearch>>;
};
```