useResultsPerPage

function Example() {
  const pipeline = new Pipeline(
    {
      account: '1594153711901724220',
      collection: 'bestbuy',
    },
    'query',
  );
  const SearchPlayground = React.memo(() => {
    const { search } = useSearch();
    const { resultsPerPage, setResultsPerPage } = useResultsPerPage();
    const { query } = useQuery();
    return (
      <div className="flex flex-col space-y-6">
        <div className="flex space-x-4">
          <div className="w-3/5">
            <Input value={query} onChange={(value) => search(value)} />
          </div>
          <div className="w-2/5">
            <Select value={`${resultsPerPage}`} onChange={(value) => setResultsPerPage(Number(value))}>
              <Option value="3">3</Option>
              <Option value="5">5</Option>
              <Option value="10">10</Option>
              <Option value="15">15</Option>
            </Select>
          </div>
        </div>
        <Results />
      </div>
    );
  });
  return (
    <SearchProvider
      search={{
        pipeline,
        fields: new FieldDictionary({
          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
          title: 'name',
        }),
      }}
    >
      <SearchPlayground />
    </SearchProvider>
  );
}