diff --git a/packages/website/docs/api.mdx b/packages/website/docs/api.mdx index 978b661b..866b7459 100644 --- a/packages/website/docs/api.mdx +++ b/packages/website/docs/api.mdx @@ -36,6 +36,9 @@ The environment in which your application is running. This is useful if you’re using DocSearch in a different context than window. + + + ## `appId` > `type: string` | **required** @@ -72,6 +75,16 @@ The [Algolia Search Parameters][7]. Receives the items from the search response, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them. + + + ```js docsearch({ // ... @@ -84,6 +97,25 @@ docsearch({ }); ``` + + + + +```jsx + { + return items.map((item) => ({ + ...item, + content: item.content.toUpperCase(), + })); + }} +/> +``` + + + + ## `hitComponent` > `type: ({ hit, children }) => JSX.Element` | `default: Hit` | **optional** @@ -181,6 +213,16 @@ const translations: DocSearchTranslations = { Function to return the URL of your documentation repository. + + + ```js docsearch({ // ... @@ -190,6 +232,22 @@ docsearch({ }); ``` + + + + +```jsx + { + return `https://github.com/algolia/docsearch/issues/new?title=${query}`; + }} +/> +``` + + + + When provided, an informative message wrapped with your link will be displayed on no results searches. The default text can be changed using the [translations](#translations) property.
@@ -209,6 +267,16 @@ You get access to the [current state](https://github.com/algolia/autocomplete/bl [You can find a working example without JSX in this sandbox](https://codesandbox.io/s/docsearch-v3-resultsfootercomponent-without-jsx-jperd5). + + + ```js docsearch({ // ... @@ -239,179 +307,6 @@ docsearch({ -## `appId` - -> `type: string` | **required** - -Your Algolia application ID. - -## `apiKey` - -> `type: string` | **required** - -Your Algolia Search API key. - -## `indexName` - -> `type: string` | **required** - -Your Algolia index name. - -## `placeholder` - -> `type: string` | `default: "Search docs" | **optional** - -The placeholder of the input of the DocSearch pop-up modal. - -## `searchParameters` - -> `type: SearchParameters` | **optional** - -The [Algolia Search Parameters][7]. - -## `transformItems` - -> `type: function` | `default: items => items` | **optional** - -Receives the items from the search response, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them. - -```jsx - { - return items.map((item) => ({ - ...item, - content: item.content.toUpperCase(), - })); - }} -/> -``` - -## `hitComponent` - -> `type: ({ hit, children }) => JSX.Element` | `default: Hit` | **optional** - -The component to display each item. - -See the [default implementation][8]. - -## `transformSearchClient` - -> `type: function` | `default: searchClient => searchClient` | **optional** - -Useful for transforming the [Algolia Search Client][10], for example to [debounce search queries][9] - -## `disableUserPersonalization` - -> `type: boolean` | `default: false` | **optional** - -Disable saving recent searches and favorites to the local storage. - -## `initialQuery` - -> `type: string` | **optional** - -The search input initial query. - -## `navigator` - -> `type: Navigator` | **optional** - -An implementation of [Algolia Autocomplete][1]’s Navigator API to redirect the user when opening a link. - -Learn more on the [Navigator API][11] documentation. - -## `translations` - -> `type: Partial` | `default: docSearchTranslations` | **optional** - -Allow translations of any raw text and aria-labels present in the DocSearch button or modal components. - -
docSearchTranslations -
- -```ts -const translations: DocSearchTranslations = { - button: { - buttonText: 'Search', - buttonAriaLabel: 'Search', - }, - modal: { - searchBox: { - resetButtonTitle: 'Clear the query', - resetButtonAriaLabel: 'Clear the query', - cancelButtonText: 'Cancel', - cancelButtonAriaLabel: 'Cancel', - }, - startScreen: { - recentSearchesTitle: 'Recent', - noRecentSearchesText: 'No recent searches', - saveRecentSearchButtonTitle: 'Save this search', - removeRecentSearchButtonTitle: 'Remove this search from history', - favoriteSearchesTitle: 'Favorite', - removeFavoriteSearchButtonTitle: 'Remove this search from favorites', - }, - errorScreen: { - titleText: 'Unable to fetch results', - helpText: 'You might want to check your network connection.', - }, - footer: { - selectText: 'to select', - selectKeyAriaLabel: 'Enter key', - navigateText: 'to navigate', - navigateUpKeyAriaLabel: 'Arrow up', - navigateDownKeyAriaLabel: 'Arrow down', - closeText: 'to close', - closeKeyAriaLabel: 'Escape key', - searchByText: 'Search by', - }, - noResultsScreen: { - noResultsText: 'No results for', - suggestedQueryText: 'Try searching for', - reportMissingResultsText: 'Believe this query should return results?', - reportMissingResultsLinkText: 'Let us know.', - }, - }, -}; -``` - -
-
- -## `getMissingResultsUrl` - -> `type: ({ query: string }) => string` | **optional** - -Function to return the URL of your documentation repository. - -```jsx - { - return `https://github.com/algolia/docsearch/issues/new?title=${query}`; - }} -/> -``` - -When provided, an informative message wrapped with your link will be displayed on no results searches. The default text can be changed using the [translations](#translations) property. - -
- No results screen with informative message -
- -## `resultsFooterComponent` - -> `type: ({ state }) => JSX.Element` | **optional** - -The component to display below the search results. - -You get access to the [current state](https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-core/src/types/AutocompleteState.ts) which allows you to retrieve the number of hits returned, the query etc. - -[You can find a working example in this sandbox](https://codesandbox.io/s/docsearch-v3-resultsfootercomponent-wzie9y). - ```jsx - [1]: https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/