@docsearch/js

This package creates a DocSearch button that opens the DocSearch search modal.

Example

<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
</head>
<body>
<div id="docsearch"></div>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<script>
docsearch({
container: '#docsearch',
apiKey: 'YOUR_API_KEY',
indexName: 'YOUR_INDEX_NAME',
});
</script>
</body>
</html>

Options

container

string | HTMLElement | required

The container for the DocSearch button. You can either pass a CSS selector or an Element. The first element matching the provided selector will be used as container.

apiKey

string | required

The Algolia search-only API key.

indexName

string | required

The Algolia index name.

appId

string | defaults to "BH4D9OD16A"

The Algolia application ID.

placeholder

string | defaults to "Search docs"

The text that appears in the search box input when there is no query.

searchParameters

SearchParameters

Search parameters to forward to Algolia.

initialQuery

string

The initial query when the modal opens.

transformItems

(items: DocSearchHit[]) => DocSearchHit[]

Function to customize the hits before rendering them.

transformSearchClient

(searchClient: SearchClient) => SearchClient

Function to transform the Algolia search client. It can be useful to alter or proxy requests.

hitComponent

(props: { hit: DocSearchHit; children: React.ReactNode; }): JSX.Element

The component to use for a hit. It's useful to use a custom link component, or to customize the hits to display.

It defaults to:

function Hit({ hit, children }) {
return <a href={hit.url}>{children}</a>;
}

navigator

Navigator

Navigator API to redirect the user when a link should be opened.

disableUserPersonalization

boolean | defaults to false

Whether to disable all personalized features: recent searches, favorite searches.

Edit this page