diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 2b57876b..4750bc67 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -70,6 +70,18 @@ export interface DocSearchProps { translations?: DocSearchTranslations; getMissingResultsUrl?: ({ query }: { query: string }) => string; insights?: AutocompleteOptions['insights']; + /** + * Limit of how many recent searches that should be saved/displayed. + * + * @default 7 + */ + recentSearchesLimit?: number; + /** + * Limit of how many recent searches that should be saved/displayed when there are favorited searches. + * + * @default 4 + */ + recentSearchesWithFavoritesLimit?: number; } export function DocSearch({ ...props }: DocSearchProps): JSX.Element { diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx index b91e11b9..b7ac120d 100644 --- a/packages/docsearch-react/src/DocSearchModal.tsx +++ b/packages/docsearch-react/src/DocSearchModal.tsx @@ -282,6 +282,8 @@ export function DocSearchModal({ onAskAiToggle, isAskAiActive = false, canHandleAskAi = false, + recentSearchesLimit = 7, + recentSearchesWithFavoritesLimit = 4, }: DocSearchModalProps): JSX.Element { const { footer: footerTranslations, searchBox: searchBoxTranslations, ...screenStateTranslations } = translations; const [state, setState] = React.useState>({ @@ -320,9 +322,7 @@ export function DocSearchModal({ const recentSearches = React.useRef( createStoredSearches({ key: `__DOCSEARCH_RECENT_SEARCHES__${indexName}`, - // We display 7 recent searches and there's no favorites, but only - // 4 when there are favorites. - limit: favoriteSearches.getAll().length === 0 ? 7 : 4, + limit: favoriteSearches.getAll().length === 0 ? recentSearchesLimit : recentSearchesWithFavoritesLimit, }), ).current; @@ -523,7 +523,9 @@ export function DocSearchModal({ return [...noQuerySources, ...recentConversationSource]; } - const querySourcesState: BuildQuerySourcesState = { context: sourcesState.context }; + const querySourcesState: BuildQuerySourcesState = { + context: sourcesState.context, + }; // Algolia sources const algoliaSourcesPromise = buildQuerySources({ diff --git a/packages/website/docs/api.mdx b/packages/website/docs/api.mdx index e553e3f1..14a356ca 100644 --- a/packages/website/docs/api.mdx +++ b/packages/website/docs/api.mdx @@ -458,6 +458,84 @@ docsearch({ +## `recentSearchesLimit` + +> `type: number` | `default: 7` | **optional** + +The maximum number of recent searches that are stored for the user. Default is 7. + + + + +```js +docsearch({ + // ... + recentSearchesLimit: 12 + // ... +}); +``` + + + + + +```jsx + +``` + + + + +## `recentSearchesWithFavoritesLimit` + +> `type: number` | `default: 4` | **optional** + +The maximum number of recent searches that are stored when the user has favorited searches. Default is 4. + + + + +```js +docsearch({ + // ... + recentSearchesWithFavoritesLimit: 5 + // ... +}); +``` + + + + + +```jsx + +``` + + + + [1]: https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/ [2]: https://github.com/algolia/docsearch/ [3]: https://github.com/algolia/docsearch/tree/master