> ## 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.
# Custom Components
> Create custom hit and footer components to match your brand and functionality
DocSearch allows you to replace the default hit and footer rendering with custom React components, giving you complete control over how search results appear.
## Custom Hit Component
The `hitComponent` prop lets you render each search result with your own component.
### Basic Custom Hit
```jsx theme={null}
import { DocSearch } from '@docsearch/react';
function CustomHit({ hit, children }) {
return (
{children}
);
}
```
### Props Passed to hitComponent
```typescript theme={null}
interface HitComponentProps {
hit: InternalDocSearchHit | StoredDocSearchHit;
children: React.ReactNode;
}
```
The `children` prop contains the default DocSearch hit content structure. You can:
* Wrap it in a custom container
* Replace it entirely with your own markup
* Add additional elements around it
## Complete Custom Hit Example
Here's a fully customized hit that replaces the default content:
```jsx theme={null}
function BrandedHit({ hit }) {
return (
);
}
```
When you access hit properties like `_snippetResult` or `_highlightResult`, you get the highlighted/snippeted version from Algolia with HTML markup. Use `dangerouslySetInnerHTML` to render it.
## Opening Links in New Tabs
To open search results in new tabs, combine a custom `hitComponent` with the `navigator` prop:
```jsx theme={null}
function HitWithNewTab({ hit, children }) {
return (
{children}
);
}
const newTabNavigator = {
navigate: ({ itemUrl }) => window.open(itemUrl, '_blank'),
navigateNewTab: ({ itemUrl }) => window.open(itemUrl, '_blank'),
navigateNewWindow: ({ itemUrl }) => window.open(itemUrl, '_blank'),
};
```
Using `target="_blank"` in the `hitComponent` alone only works for mouse clicks. Keyboard navigation (arrow keys + Enter) requires the `navigator` prop to open links in new tabs consistently.
## Using the Default Children
If you want to keep the default hit content but add wrapper elements:
```jsx theme={null}
function HitWithBadge({ hit, children }) {
const isNew = Date.now() - new Date(hit.published_at).getTime() < 7 * 24 * 60 * 60 * 1000;
return (
{isNew && (
NEW
)}
{children}
);
}
```
## Custom Results Footer Component
The `resultsFooterComponent` allows you to render custom content at the bottom of the search results panel.
### Basic Footer Component
```jsx theme={null}
function CustomFooter({ state }) {
return (
Found {state.context.nbHits || 0} results
);
}
```
### Props Passed to resultsFooterComponent
```typescript theme={null}
interface FooterComponentProps {
state: AutocompleteState;
}
```
The `state` object contains:
* `state.query`: Current search query
* `state.context.nbHits`: Total number of results
* `state.collections`: Array of result collections
* `state.status`: Current search status ('idle', 'loading', 'stalled', 'error')
## Advanced Footer Example
```jsx theme={null}
function AdvancedFooter({ state }) {
const hasResults = state.collections.some(
(collection) => collection.items.length > 0
);
if (!hasResults) {
return null; // Don't show footer when no results
}
return (
{state.context.nbHits || 0} results for
"{state.query}"
);
}
```
## Conditional Footer Based on State
```jsx theme={null}
function ConditionalFooter({ state }) {
const totalHits = state.context.nbHits || 0;
if (state.status === 'loading') {
return (
Searching...
);
}
if (state.status === 'error') {
return (
⚠️ Search error. Please try again.
);
}
if (totalHits === 0) {
return null; // No footer for empty results
}
return (
Showing top results from {totalHits} total matches
);
}
```
## TypeScript Support
When using TypeScript, you can import the proper types:
```typescript theme={null}
import type { JSX } from 'react';
import type { AutocompleteState } from '@algolia/autocomplete-core';
import type { InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react';
interface CustomHitProps {
hit: InternalDocSearchHit | StoredDocSearchHit;
children: React.ReactNode;
}
function CustomHit({ hit, children }: CustomHitProps): JSX.Element {
return (
{children}
);
}
interface CustomFooterProps {
state: AutocompleteState;
}
function CustomFooter({ state }: CustomFooterProps): JSX.Element | null {
return (
Found {state.context.nbHits || 0} results
);
}
```
## Styling Tips
The default DocSearch structure uses classes like `DocSearch-Hit`, `DocSearch-Hit-Container`, etc. You can target these in your custom components or replace them entirely.
Use inline styles or CSS classes that match your site's design system. The `theme` prop controls modal colors but doesn't affect custom component styles.
Ensure your custom components work well on mobile devices where the modal is full-screen.
## Complete Example
```jsx theme={null}
import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
function CustomHit({ hit, children }) {
return (