react-instantsearch
Version:
⚡ Lightning-fast search for React, by Algolia
53 lines (52 loc) • 2.49 kB
TypeScript
import React from 'react';
import { useAutocomplete } from 'react-instantsearch-core';
import type { PlainSearchParameters } from 'algoliasearch-helper';
import type { AutocompleteIndexClassNames, AutocompleteIndexConfig, AutocompleteClassNames, AutocompleteIndexProps } from 'instantsearch-ui-components';
import type { BaseHit, IndexUiState } from 'instantsearch.js';
import type { ComponentProps } from 'react';
type AutocompleteSearchParameters = Omit<PlainSearchParameters, 'index'>;
type IndexConfig<TItem extends BaseHit> = AutocompleteIndexConfig<TItem> & {
headerComponent?: AutocompleteIndexProps<TItem>['HeaderComponent'];
itemComponent: AutocompleteIndexProps<TItem>['ItemComponent'];
searchParameters?: AutocompleteSearchParameters;
classNames?: Partial<AutocompleteIndexClassNames>;
};
type PanelElements = Partial<Record<'recent' | 'suggestions' | (string & {}), React.JSX.Element>>;
export type AutocompleteProps<TItem extends BaseHit> = ComponentProps<'div'> & {
indices?: Array<IndexConfig<TItem>>;
showSuggestions?: Partial<Pick<IndexConfig<{
query: string;
}>, 'indexName' | 'getURL' | 'headerComponent' | 'itemComponent' | 'classNames'>>;
showRecent?: boolean | {
/**
* Storage key to use in the local storage.
*/
storageKey?: string;
/**
* Component to use for the header, before the list of items.
*/
headerComponent?: AutocompleteIndexProps<{
query: string;
}>['HeaderComponent'];
/**
* Component to use for each recent search item.
*/
itemComponent?: AutocompleteIndexProps<{
query: string;
}>['ItemComponent'] & {
onRemoveRecentSearch: () => void;
};
classNames?: Partial<AutocompleteIndexClassNames>;
};
getSearchPageURL?: (nextUiState: IndexUiState) => string;
onSelect?: AutocompleteIndexConfig<TItem>['onSelect'];
panelComponent?: (props: {
elements: PanelElements;
indices: ReturnType<typeof useAutocomplete>['indices'];
}) => React.JSX.Element;
searchParameters?: AutocompleteSearchParameters;
classNames?: Partial<AutocompleteClassNames>;
placeholder?: string;
};
export declare function EXPERIMENTAL_Autocomplete<TItem extends BaseHit = BaseHit>({ indices, showSuggestions, showRecent, searchParameters: userSearchParameters, ...props }: AutocompleteProps<TItem>): React.JSX.Element;
export {};