> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/algolia/docsearch/llms.txt
> Use this file to discover all available pages before exploring further.
# Customization
> Learn how to customize DocSearch behavior, appearance, and search results
DocSearch provides extensive customization options to tailor the search experience to your documentation site's needs.
## Placeholder Text
Customize the search input placeholder text to guide users:
```jsx theme={null}
import { DocSearch } from '@docsearch/react';
function App() {
return (
);
}
```
The placeholder text automatically adapts when Ask AI features are enabled:
* **Default**: Uses your custom `placeholder` prop or "Search docs"
* **Ask AI enabled**: Changes to "Search docs or ask AI a question"
* **In Ask AI mode**: Shows "Ask another question..."
## Transform Items
The `transformItems` function allows you to modify search results before they're displayed. This is useful for filtering, sorting, or enhancing results.
```jsx theme={null}
{
// Filter out deprecated pages
return items.filter((item) => !item.url.includes('/deprecated/'));
}}
/>
```
### Common Use Cases
```jsx theme={null}
transformItems={(items) => {
const currentVersion = 'v2';
return items.filter((item) =>
item.hierarchy?.lvl0?.includes(currentVersion)
);
}}
```
```jsx theme={null}
transformItems={(items) => {
return items.sort((a, b) => {
// Prioritize "Getting Started" pages
const aIsGettingStarted = a.hierarchy?.lvl1?.includes('Getting Started');
const bIsGettingStarted = b.hierarchy?.lvl1?.includes('Getting Started');
if (aIsGettingStarted && !bIsGettingStarted) return -1;
if (!aIsGettingStarted && bIsGettingStarted) return 1;
return 0;
});
}}
```
```jsx theme={null}
transformItems={(items) => {
return items.map((item) => ({
...item,
// Add custom badge based on content type
customBadge: item.type === 'lvl1' ? 'Guide' : 'Reference',
}));
}}
```
## Maximum Results Per Group
Control how many results are displayed per section:
```jsx theme={null}
```
The default value is determined by the Algolia search configuration. Setting this value will override the default behavior.
## Custom Hit Component
Customize how individual search results are rendered:
```jsx theme={null}
(
{children}
{hit.type === 'lvl1' && (
Guide
)}
)}
/>
```
### Using HTML Template Syntax
You can also use HTML template strings:
```jsx theme={null}
hitComponent={(props, { html }) => html`
${props.hit.hierarchy.lvl1}
${props.hit.content}
`}
```
## Results Footer Component
Add custom content at the bottom of search results:
```jsx theme={null}
(
)}
/>
```
## Search Parameters
Pass additional Algolia search parameters to customize the search behavior:
```jsx theme={null}
```
The `indices` property replaces the deprecated `indexName` and `searchParameters` props, allowing you to search multiple indices with different configurations.
## Multiple Indices
Search across multiple documentation indices:
```jsx theme={null}
```
## Transform Search Client
Modify the Algolia search client before it's used:
```jsx theme={null}
{
// Add custom headers or modify requests
return {
...searchClient,
search(requests) {
// Log search queries for analytics
console.log('Search requests:', requests);
return searchClient.search(requests);
},
};
}}
/>
```
## Initial Query
Pre-fill the search input with an initial query:
```jsx theme={null}
```
## Custom Navigator
Control navigation behavior when users select search results:
```jsx theme={null}
import { useNavigate } from 'react-router-dom';
function App() {
const navigate = useNavigate();
return (
);
}
```
## Missing Results URL
Provide a feedback mechanism for queries with no results:
```jsx theme={null}
{
return `https://github.com/your-org/docs/issues/new?title=Missing results for "${query}"`;
}}
/>
```
When users search for something with no results, they'll see a link to report the missing content.
## Portal Container
Specify where the search modal should be rendered in the DOM:
```jsx theme={null}
```
By default, the modal is rendered into `document.body`.