SortBy

Purpose

The SortBy component is a wrapper for the useSortBy hook, 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.

See the useSortBy page for more usage details.

Basic

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

import { ExampleSortby } from "./ExampleSortBy";

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

ExampleSortBy

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>
  );
};

Props

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