diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index e9b1a93e6..8f76de7b9 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -29,6 +29,7 @@ export interface DocSearchProps { indexName: string; placeholder?: string; searchParameters?: SearchOptions; + maxResultsPerGroup?: number; transformItems?: (items: DocSearchHit[]) => DocSearchHit[]; hitComponent?: (props: { hit: InternalDocSearchHit | StoredDocSearchHit; diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx index 686e12755..f701e2900 100644 --- a/packages/docsearch-react/src/DocSearchModal.tsx +++ b/packages/docsearch-react/src/DocSearchModal.tsx @@ -46,6 +46,7 @@ export function DocSearchModal({ indexName, placeholder = 'Search docs', searchParameters, + maxResultsPerGroup, onClose = noop, transformItems = identity, hitComponent = Hit, @@ -240,7 +241,11 @@ export function DocSearchModal({ }) .then(({ results }) => { const { hits, nbHits } = results[0]; - const sources = groupBy(hits, (hit) => removeHighlightTags(hit)); + const sources = groupBy( + hits, + (hit) => removeHighlightTags(hit), + maxResultsPerGroup + ); // We store the `lvl0`s to display them as search suggestions // in the "no results" screen. @@ -271,7 +276,11 @@ export function DocSearchModal({ }, getItems() { return Object.values( - groupBy(items, (item) => item.hierarchy.lvl1) + groupBy( + items, + (item) => item.hierarchy.lvl1, + maxResultsPerGroup + ) ) .map(transformItems) .map((groupedHits) => @@ -300,6 +309,7 @@ export function DocSearchModal({ [ indexName, searchParameters, + maxResultsPerGroup, searchClient, onClose, recentSearches, diff --git a/packages/docsearch-react/src/utils/groupBy.ts b/packages/docsearch-react/src/utils/groupBy.ts index d0408bc40..27e05be95 100644 --- a/packages/docsearch-react/src/utils/groupBy.ts +++ b/packages/docsearch-react/src/utils/groupBy.ts @@ -1,6 +1,7 @@ export function groupBy>( values: TValue[], - predicate: (value: TValue) => string + predicate: (value: TValue) => string, + maxResultsPerGroup?: number ): Record { return values.reduce>((acc, item) => { const key = predicate(item); @@ -11,7 +12,7 @@ export function groupBy>( // We limit each section to show 5 hits maximum. // This acts as a frontend alternative to `distinct`. - if (acc[key].length < 5) { + if (acc[key].length < (maxResultsPerGroup || 5)) { acc[key].push(item); }