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

# SortBy

### Purpose

The SortBy component is a wrapper for the [useSortBy hook](/hooks/usesortby.md), it provides a simple way to access and render the sort options.

### Usage

If a render method is not provided the built-in component for sorting will be rendered.

{% hint style="info" %}
See the [useSortBy](/hooks/usesortby.md) page for more usage details.
{% endhint %}

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

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

import { ExampleSortby } from "./ExampleSortBy";

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

{% endtab %}

{% tab title="ExampleSortBy" %}

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

export type ExampleSortByProps = React.ComponentProps<
  NonNullable<SortByProps["render"]>
>;

export const ExampleSortBy: React.FC<ExampleSortByProps> = (props) => {
  return (
    <select
      className="rs__sortby__select"
      value={props.sortOption?.handle}
      onChange={(event) => props.setSortOption(event.target.value)}
    >
      {props.sortOptions.map((sortOption) => (
        <option
          key={sortOption.handle}
          className="rs__sortby__option"
          value={sortOption.handle}
        >
          {sortOption.name}
        </option>
      ))}
    </select>
  );
};

```

{% endtab %}
{% endtabs %}

### Props

```typescript
type SortByProps = {
  /** Render method called once for all sort options */
  render?: React.FC<ReturnType<typeof useSortBy>>;
};
```