Sorting

The Sorting component is used to capture user input on how to sort search results.

import { Sorting } from '@sajari/react-search-ui';

import { Sorting } from '@sajari/react-search-ui';

Usage

Additional imports used in the examples:

import { FieldDictionary, Input, Pipeline, Results, SearchProvider } from '@sajari/react-search-ui';

import { FieldDictionary, Input, Pipeline, Results, SearchProvider } from '@sajari/react-search-ui';

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="space-y-6">
      <div className="flex items-center space-x-4">
        <div className="flex-1">
          <Input />
        </div>
        <Sorting
          type="select"
          options={[
            { name: 'Most relevant', value: '' },
            { name: 'Brand: A to Z', value: 'brand' },
            { name: 'Brand: Z to A', value: '-brand' },
            { name: 'Rating: Low to High', value: 'rating' },
            { name: 'Rating: High to Low', value: '-rating' },
            { name: 'Popularity', value: 'popularity' },
          ]}
        />
      </div>

      <Results />
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="space-y-6">
      <div className="flex items-center space-x-4">
        <div className="flex-1">
          <Input />
        </div>
        <Sorting
          type="select"
          options={[
            { name: 'Most relevant', value: '' },
            { name: 'Brand: A to Z', value: 'brand' },
            { name: 'Brand: Z to A', value: '-brand' },
            { name: 'Rating: Low to High', value: 'rating' },
            { name: 'Rating: High to Low', value: '-rating' },
            { name: 'Popularity', value: 'popularity' },
          ]}
        />
      </div>
      <Results />
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Display

The sorting component comes in 2 variants: select and list. Pass the variant prop and set it to one of these values.

Editable Example

Suggestions

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );

  const SearchPlayground = React.memo(() => (
    <div className="flex flex-col space-y-6">
      <Input />

      <div className="flex -mx-3">
        <div className="w-1/4 px-3 border-gray-100 border-r space-y-6">
          <Sorting
            type="list"
            options={[
              { name: 'Most relevant', value: '' },
              { name: 'Brand: A to Z', value: 'brand' },
              { name: 'Brand: Z to A', value: '-brand' },
              { name: 'Rating: Low to High', value: 'rating' },
              { name: 'Rating: High to Low', value: '-rating' },
              { name: 'Popularity', value: 'popularity' },
            ]}
          />
        </div>
        <div className="w-3/4 px-3">
          <Results />
        </div>
      </div>
    </div>
  ));

  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => (
    <div className="flex flex-col space-y-6">
      <Input />
      <div className="flex -mx-3">
        <div className="w-1/4 px-3 border-gray-100 border-r space-y-6">
          <Sorting
            type="list"
            options={[
              { name: 'Most relevant', value: '' },
              { name: 'Brand: A to Z', value: 'brand' },
              { name: 'Brand: Z to A', value: '-brand' },
              { name: 'Rating: Low to High', value: 'rating' },
              { name: 'Rating: High to Low', value: '-rating' },
              { name: 'Popularity', value: 'popularity' },
            ]}
          />
        </div>
        <div className="w-3/4 px-3">
          <Results />
        </div>
      </div>
    </div>
  ));
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          title: 'name',
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
        }),
      }}
      searchOnLoad
    >
      <SearchPlayground />
    </SearchProvider>
  );
}

Props

Name	Type	Default	Description
`label`	`string`	`"Sort"`
`type`	`"select"` \| `"list"`	`"select"`	The appearance of the sorting component.
`options`	`Array<{name: string, value: string}>`	`[{name: "Most relevant", value: ""}]`
`size`	`sm` \| `md` \| `lg`	`md`	Sets the text and input size.