react-instantsearch

  • Version 7.20.0
  • Published
  • 5.11 MB
  • 4 dependencies
  • MIT license

Install

npm i react-instantsearch
yarn add react-instantsearch
pnpm add react-instantsearch

Overview

⚡ Lightning-fast search for React, by Algolia

Index

Functions

Breadcrumb: ({
attributes,
rootPath,
separator,
transformItems,
translations,
...props
}: BreadcrumbProps) => React.JSX.Element;
    Carousel: <TObject extends Record<string, unknown>>(
    props: CarouselProps<TObject>
    ) => React.JSX.Element;

      function Chat

      Chat: <TObject extends RecordWithObjectID, TUiMessage extends UIMessage>({
      tools: userTools,
      toggleButtonProps,
      headerProps,
      messagesProps,
      promptProps,
      itemComponent,
      toggleButtonComponent,
      toggleButtonIconComponent,
      headerComponent,
      headerTitleIconComponent,
      headerCloseIconComponent,
      headerMinimizeIconComponent,
      headerMaximizeIconComponent,
      messagesLoaderComponent,
      messagesErrorComponent,
      promptComponent,
      promptHeaderComponent,
      promptFooterComponent,
      assistantMessageLeadingComponent,
      assistantMessageFooterComponent,
      userMessageLeadingComponent,
      userMessageFooterComponent,
      actionsComponent,
      classNames,
      translations,
      title,
      getSearchPageURL,
      ...props
      }: ChatProps<TObject, TUiMessage>) => React.JSX.Element;

        function ClearRefinements

        ClearRefinements: ({
        includedAttributes,
        excludedAttributes,
        transformItems,
        translations,
        ...props
        }: ClearRefinementsProps) => React.JSX.Element;

          function createDefaultTools

          createDefaultTools: <TObject extends RecordWithObjectID>(
          itemComponent?: RecommendComponentProps<TObject>,
          getSearchPageURL?: (nextUiState: IndexUiState) => string
          ) => UserClientSideTools;

            function CurrentRefinements

            CurrentRefinements: ({
            includedAttributes,
            excludedAttributes,
            transformItems,
            ...props
            }: CurrentRefinementsProps) => React.JSX.Element;

              function EXPERIMENTAL_Autocomplete

              EXPERIMENTAL_Autocomplete: <TItem extends BaseHit = BaseHit>({
              indices,
              showSuggestions,
              showRecent,
              searchParameters: userSearchParameters,
              ...props
              }: AutocompleteProps<TItem>) => React.JSX.Element;

                function FrequentlyBoughtTogether

                FrequentlyBoughtTogether: <THit extends BaseHit = BaseHit>({
                objectIDs,
                limit,
                threshold,
                queryParameters,
                fallbackParameters,
                escapeHTML,
                transformItems,
                itemComponent,
                headerComponent,
                emptyComponent,
                layoutComponent,
                ...props
                }: FrequentlyBoughtTogetherProps<THit>) => React.JSX.Element;

                  function HierarchicalMenu

                  HierarchicalMenu: ({
                  attributes,
                  limit,
                  rootPath,
                  separator,
                  showMore,
                  showMoreLimit,
                  showParentLevel,
                  sortBy,
                  transformItems,
                  translations,
                  ...props
                  }: HierarchicalMenuProps) => React.JSX.Element;

                    function Highlight

                    Highlight: <THit extends Hit<BaseHit>>({
                    hit,
                    attribute,
                    highlightedTagName,
                    nonHighlightedTagName,
                    separator,
                    ...props
                    }: HighlightProps<THit>) => React.JSX.Element;

                      function Hits

                      Hits: <THit extends BaseHit = BaseHit>({
                      escapeHTML,
                      transformItems,
                      hitComponent: HitComponent,
                      bannerComponent: BannerComponent,
                      ...props
                      }: HitsProps<THit>) => React.JSX.Element;

                        function HitsPerPage

                        HitsPerPage: ({
                        items: userItems,
                        transformItems,
                        ...props
                        }: HitsPerPageProps) => React.JSX.Element;

                          function InfiniteHits

                          InfiniteHits: <THit extends BaseHit = BaseHit>({
                          showPrevious: shouldShowPrevious,
                          cache,
                          escapeHTML,
                          transformItems,
                          translations,
                          bannerComponent: BannerComponent,
                          ...props
                          }: InfiniteHitsProps<THit>) => React.JSX.Element;

                            function LookingSimilar

                            LookingSimilar: <THit extends BaseHit = BaseHit>({
                            objectIDs,
                            limit,
                            threshold,
                            queryParameters,
                            fallbackParameters,
                            escapeHTML,
                            transformItems,
                            itemComponent,
                            headerComponent,
                            emptyComponent,
                            layoutComponent,
                            ...props
                            }: LookingSimilarProps<THit>) => React.JSX.Element;
                              Menu: ({
                              attribute,
                              limit,
                              showMore,
                              showMoreLimit,
                              sortBy,
                              transformItems,
                              translations,
                              ...props
                              }: MenuProps) => React.JSX.Element;

                                function Pagination

                                Pagination: ({
                                showFirst,
                                showPrevious,
                                showNext,
                                showLast,
                                padding,
                                totalPages,
                                translations,
                                ...props
                                }: PaginationProps) => React.JSX.Element;

                                  function PoweredBy

                                  PoweredBy: (props: PoweredByProps) => React.JSX.Element;

                                    function RangeInput

                                    RangeInput: ({
                                    attribute,
                                    min,
                                    max,
                                    precision,
                                    translations,
                                    ...props
                                    }: RangeInputProps) => React.JSX.Element;

                                      function RefinementList

                                      RefinementList: ({
                                      searchable,
                                      searchablePlaceholder,
                                      searchableSelectOnSubmit,
                                      attribute,
                                      operator,
                                      limit,
                                      showMore,
                                      showMoreLimit,
                                      sortBy,
                                      escapeFacetValues,
                                      transformItems,
                                      translations,
                                      ...props
                                      }: RefinementListProps) => React.JSX.Element;

                                        function RelatedProducts

                                        RelatedProducts: <TItem extends BaseHit = BaseHit>({
                                        objectIDs,
                                        limit,
                                        threshold,
                                        fallbackParameters,
                                        queryParameters,
                                        escapeHTML,
                                        transformItems,
                                        itemComponent,
                                        headerComponent,
                                        emptyComponent,
                                        layoutComponent,
                                        ...props
                                        }: RelatedProductsProps<TItem>) => React.JSX.Element;

                                          function ReverseHighlight

                                          ReverseHighlight: <THit extends Hit<BaseHit>>({
                                          hit,
                                          attribute,
                                          highlightedTagName,
                                          nonHighlightedTagName,
                                          separator,
                                          ...props
                                          }: ReverseHighlightProps<THit>) => React.JSX.Element;
                                            SearchBox: ({
                                            queryHook,
                                            searchAsYouType,
                                            ignoreCompositionEvents,
                                            translations,
                                            ...props
                                            }: SearchBoxProps) => React.JSX.Element;

                                              function Snippet

                                              Snippet: <THit extends Hit<BaseHit>>({
                                              hit,
                                              attribute,
                                              highlightedTagName,
                                              nonHighlightedTagName,
                                              separator,
                                              ...props
                                              }: SnippetProps<THit>) => React.JSX.Element;

                                                function SortBy

                                                SortBy: ({ items, transformItems, ...props }: SortByProps) => React.JSX.Element;

                                                  function Stats

                                                  Stats: ({ translations, ...props }: StatsProps) => React.JSX.Element;

                                                    function ToggleRefinement

                                                    ToggleRefinement: ({
                                                    attribute,
                                                    on,
                                                    off,
                                                    ...props
                                                    }: ToggleRefinementProps) => React.JSX.Element;

                                                      function TrendingItems

                                                      TrendingItems: <TItem extends BaseHit = BaseHit>({
                                                      facetName,
                                                      facetValue,
                                                      limit,
                                                      threshold,
                                                      fallbackParameters,
                                                      queryParameters,
                                                      escapeHTML,
                                                      transformItems,
                                                      itemComponent,
                                                      headerComponent,
                                                      emptyComponent,
                                                      layoutComponent,
                                                      ...props
                                                      }: TrendingItemsProps<TItem>) => React.JSX.Element;

                                                        Type Aliases

                                                        type AutocompleteProps

                                                        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 each recent search item.
                                                        */
                                                        itemComponent: AutocompleteIndexProps<{
                                                        query: string;
                                                        }>['ItemComponent'] & {
                                                        onRemoveRecentSearch: () => void;
                                                        };
                                                        };
                                                        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>;
                                                        };
                                                          type BreadcrumbProps = Omit<BreadcrumbUiProps, keyof UiProps> &
                                                          Omit<UseBreadcrumbProps, 'separator'> & {
                                                          translations?: Partial<UiProps['translations']>;
                                                          };

                                                            type CarouselProps

                                                            type CarouselProps<TObject extends Record<string, unknown>> = Omit<
                                                            CarouselUiProps<TObject>,
                                                            | 'listRef'
                                                            | 'nextButtonRef'
                                                            | 'previousButtonRef'
                                                            | 'carouselIdRef'
                                                            | 'canScrollLeft'
                                                            | 'canScrollRight'
                                                            | 'setCanScrollLeft'
                                                            | 'setCanScrollRight'
                                                            >;

                                                              type ChatProps

                                                              type ChatProps<TObject, TUiMessage extends UIMessage = UIMessage> = Omit<
                                                              ChatUiProps,
                                                              keyof UiProps
                                                              > &
                                                              UseChatProps<TUiMessage> & {
                                                              itemComponent?: ItemComponent<TObject>;
                                                              tools?: UserClientSideTools;
                                                              getSearchPageURL?: (nextUiState: IndexUiState) => string;
                                                              toggleButtonProps?: UserToggleButtonProps;
                                                              headerProps?: UserHeaderProps;
                                                              messagesProps?: UserMessagesProps;
                                                              promptProps?: UserPromptProps;
                                                              toggleButtonComponent?: ChatUiProps['toggleButtonComponent'];
                                                              toggleButtonIconComponent?: ChatUiProps['toggleButtonProps']['toggleIconComponent'];
                                                              headerComponent?: ChatUiProps['headerComponent'];
                                                              headerTitleIconComponent?: ChatUiProps['headerProps']['titleIconComponent'];
                                                              headerCloseIconComponent?: ChatUiProps['headerProps']['closeIconComponent'];
                                                              headerMinimizeIconComponent?: ChatUiProps['headerProps']['minimizeIconComponent'];
                                                              headerMaximizeIconComponent?: ChatUiProps['headerProps']['maximizeIconComponent'];
                                                              messagesLoaderComponent?: ChatUiProps['messagesProps']['loaderComponent'];
                                                              messagesErrorComponent?: ChatUiProps['messagesProps']['errorComponent'];
                                                              promptComponent?: ChatUiProps['promptComponent'];
                                                              promptHeaderComponent?: ChatUiProps['promptProps']['headerComponent'];
                                                              promptFooterComponent?: ChatUiProps['promptProps']['footerComponent'];
                                                              actionsComponent?: ChatUiProps['messagesProps']['actionsComponent'];
                                                              assistantMessageLeadingComponent?: ChatMessageProps['leadingComponent'];
                                                              assistantMessageFooterComponent?: ChatMessageProps['footerComponent'];
                                                              userMessageLeadingComponent?: ChatMessageProps['leadingComponent'];
                                                              userMessageFooterComponent?: ChatMessageProps['footerComponent'];
                                                              translations?: Partial<{
                                                              prompt: ChatUiProps['promptProps']['translations'];
                                                              header: ChatUiProps['headerProps']['translations'];
                                                              message: ChatUiProps['messagesProps']['messageTranslations'];
                                                              messages: ChatUiProps['messagesProps']['translations'];
                                                              }>;
                                                              };

                                                                type ClearRefinementsProps

                                                                type ClearRefinementsProps = Omit<ClearRefinementsUiComponentProps, keyof UiProps> &
                                                                UseClearRefinementsProps & {
                                                                translations?: Partial<UiProps['translations']>;
                                                                };

                                                                  type CurrentRefinementsProps

                                                                  type CurrentRefinementsProps = Omit<
                                                                  CurrentRefinementsUiComponentProps,
                                                                  keyof UiProps
                                                                  > &
                                                                  UseCurrentRefinementsProps;

                                                                    type FrequentlyBoughtTogetherProps

                                                                    type FrequentlyBoughtTogetherProps<THit extends BaseHit> = Omit<
                                                                    FrequentlyBoughtTogetherPropsUiComponentProps<Hit<THit>>,
                                                                    keyof UiProps<THit>
                                                                    > &
                                                                    UseFrequentlyBoughtTogetherProps<THit> & {
                                                                    itemComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['itemComponent'];
                                                                    headerComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['headerComponent'];
                                                                    emptyComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['emptyComponent'];
                                                                    layoutComponent?: FrequentlyBoughtTogetherPropsUiComponentProps<THit>['layout'];
                                                                    };

                                                                      type HierarchicalMenuProps

                                                                      type HierarchicalMenuProps = Omit<HierarchicalMenuUiComponentProps, keyof UiProps> &
                                                                      UseHierarchicalMenuProps & {
                                                                      translations?: Partial<UiProps['translations']>;
                                                                      };

                                                                        type HighlightProps

                                                                        type HighlightProps<THit extends Hit<BaseHit>> = {
                                                                        hit: THit;
                                                                        attribute: keyof THit | string[];
                                                                        } & PartialKeys<
                                                                        Omit<HighlightUiComponentProps, 'parts'>,
                                                                        'highlightedTagName' | 'nonHighlightedTagName' | 'separator'
                                                                        >;

                                                                          type HitsPerPageProps

                                                                          type HitsPerPageProps = Omit<HitsPerPageUiComponentProps, keyof UiProps> &
                                                                          UseHitsPerPageProps;

                                                                            type HitsProps

                                                                            type HitsProps<THit extends BaseHit> = Omit<
                                                                            HitsUiComponentProps<Hit<THit>>,
                                                                            keyof UiProps<THit>
                                                                            > & {
                                                                            hitComponent?: React.JSXElementConstructor<{
                                                                            hit: Hit<THit>;
                                                                            sendEvent: SendEventForHits;
                                                                            }>;
                                                                            } & {
                                                                            bannerComponent?:
                                                                            | React.JSXElementConstructor<{
                                                                            banner: Required<HitsUiComponentProps<Hit<THit>>>['banner'];
                                                                            className: string;
                                                                            }>
                                                                            | false;
                                                                            } & UseHitsProps<THit>;

                                                                              type InfiniteHitsProps

                                                                              type InfiniteHitsProps<THit extends BaseHit = BaseHit> = Omit<
                                                                              InfiniteHitsUiComponentProps<Hit<THit>>,
                                                                              keyof UiProps<THit>
                                                                              > & {
                                                                              bannerComponent?:
                                                                              | React.JSXElementConstructor<{
                                                                              banner: Required<InfiniteHitsUiComponentProps<Hit<THit>>>['banner'];
                                                                              className: string;
                                                                              }>
                                                                              | false;
                                                                              } & UseInfiniteHitsProps<THit> & {
                                                                              /**
                                                                              * Displays the "Show Previous" button when the UI is loaded from a page
                                                                              * beyond the first one.
                                                                              * @default true
                                                                              */
                                                                              showPrevious?: boolean;
                                                                              translations?: Partial<UiProps<THit>['translations']>;
                                                                              };

                                                                                type LookingSimilarProps

                                                                                type LookingSimilarProps<THit extends BaseHit> = Omit<
                                                                                LookingSimilarPropsUiComponentProps<Hit<THit>>,
                                                                                keyof UiProps<THit>
                                                                                > &
                                                                                UseLookingSimilarProps<THit> & {
                                                                                itemComponent?: LookingSimilarPropsUiComponentProps<THit>['itemComponent'];
                                                                                headerComponent?: LookingSimilarPropsUiComponentProps<THit>['headerComponent'];
                                                                                emptyComponent?: LookingSimilarPropsUiComponentProps<THit>['emptyComponent'];
                                                                                layoutComponent?: LookingSimilarPropsUiComponentProps<THit>['layout'];
                                                                                };
                                                                                  type MenuProps = Omit<MenuUiComponentProps, keyof UiProps> &
                                                                                  UseMenuProps & {
                                                                                  translations?: Partial<UiProps['translations']>;
                                                                                  };

                                                                                    type PaginationProps

                                                                                    type PaginationProps = Omit<PaginationUiComponentProps, keyof UiProps> &
                                                                                    UsePaginationProps & {
                                                                                    translations?: Partial<UiProps['translations']>;
                                                                                    };

                                                                                      type PoweredByProps

                                                                                      type PoweredByProps = Omit<PoweredByUiComponentProps, keyof UiProps>;

                                                                                        type RangeInputProps

                                                                                        type RangeInputProps = Omit<RangeInputUiProps, keyof UiProps> &
                                                                                        UseRangeProps & {
                                                                                        translations?: Partial<UiProps['translations']>;
                                                                                        };

                                                                                          type RefinementListProps

                                                                                          type RefinementListProps = Omit<RefinementListUiComponentProps, keyof UiProps> &
                                                                                          UseRefinementListProps &
                                                                                          Pick<
                                                                                          RefinementListWidgetParams,
                                                                                          'searchable' | 'searchablePlaceholder' | 'searchableSelectOnSubmit'
                                                                                          > & {
                                                                                          translations?: Partial<
                                                                                          UiProps['translations'] &
                                                                                          SearchBoxTranslations & {
                                                                                          /**
                                                                                          * What to display when there are no results.
                                                                                          */
                                                                                          noResultsText: string;
                                                                                          }
                                                                                          >;
                                                                                          };

                                                                                            type RelatedProductsProps

                                                                                            type RelatedProductsProps<TItem extends BaseHit> = Omit<
                                                                                            RelatedProductsUiComponentProps<TItem>,
                                                                                            keyof UiProps<TItem>
                                                                                            > &
                                                                                            UseRelatedProductsProps & {
                                                                                            itemComponent?: RelatedProductsUiComponentProps<TItem>['itemComponent'];
                                                                                            headerComponent?: RelatedProductsUiComponentProps<TItem>['headerComponent'];
                                                                                            emptyComponent?: RelatedProductsUiComponentProps<TItem>['emptyComponent'];
                                                                                            layoutComponent?: RelatedProductsUiComponentProps<TItem>['layout'];
                                                                                            };

                                                                                              type ReverseHighlightProps

                                                                                              type ReverseHighlightProps<THit extends Hit<BaseHit>> = {
                                                                                              hit: THit;
                                                                                              attribute: keyof THit | string[];
                                                                                              } & PartialKeys<
                                                                                              Omit<ReverseHighlightUiComponentProps, 'parts'>,
                                                                                              'highlightedTagName' | 'nonHighlightedTagName' | 'separator'
                                                                                              >;

                                                                                                type SearchBoxProps

                                                                                                type SearchBoxProps = Omit<
                                                                                                SearchBoxUiComponentProps,
                                                                                                Exclude<keyof UiProps, 'onSubmit' | 'autoFocus'>
                                                                                                > &
                                                                                                UseSearchBoxProps & {
                                                                                                /**
                                                                                                * Whether to trigger the search only on submit.
                                                                                                * @default true
                                                                                                */
                                                                                                searchAsYouType?: boolean;
                                                                                                /**
                                                                                                * Whether to update the search state in the middle of a
                                                                                                * composition session.
                                                                                                * @default false
                                                                                                */
                                                                                                ignoreCompositionEvents?: boolean;
                                                                                                translations?: Partial<UiProps['translations']>;
                                                                                                };

                                                                                                  type SnippetProps

                                                                                                  type SnippetProps<THit extends Hit<BaseHit>> = {
                                                                                                  hit: THit;
                                                                                                  attribute: keyof THit | string[];
                                                                                                  } & PartialKeys<
                                                                                                  Omit<SnippetUiComponentProps, 'parts'>,
                                                                                                  'highlightedTagName' | 'nonHighlightedTagName' | 'separator'
                                                                                                  >;

                                                                                                    type SortByProps

                                                                                                    type SortByProps = Omit<SortByUiComponentProps, keyof UiProps> & UseSortByProps;

                                                                                                      type StatsProps

                                                                                                      type StatsProps = Omit<StatsUiComponentProps, keyof UiProps> &
                                                                                                      UseStatsProps & {
                                                                                                      translations?: Partial<UiProps['translations']>;
                                                                                                      };

                                                                                                        type ToggleRefinementProps

                                                                                                        type ToggleRefinementProps = PartialKeys<
                                                                                                        Omit<ToggleRefinementUiComponentProps, keyof UiProps>,
                                                                                                        'label'
                                                                                                        > &
                                                                                                        UseToggleRefinementProps;

                                                                                                          type Tool

                                                                                                          type Tool = UserClientSideTool;

                                                                                                            type Tools

                                                                                                            type Tools = UserClientSideTools;

                                                                                                              type TrendingItemsProps

                                                                                                              type TrendingItemsProps<TItem extends BaseHit> = Omit<
                                                                                                              TrendingItemsUiComponentProps<TItem>,
                                                                                                              keyof UiProps<TItem>
                                                                                                              > &
                                                                                                              UseTrendingItemsProps & {
                                                                                                              itemComponent?: TrendingItemsUiComponentProps<TItem>['itemComponent'];
                                                                                                              headerComponent?: TrendingItemsUiComponentProps<TItem>['headerComponent'];
                                                                                                              emptyComponent?: TrendingItemsUiComponentProps<TItem>['emptyComponent'];
                                                                                                              layoutComponent?: TrendingItemsUiComponentProps<TItem>['layout'];
                                                                                                              };

                                                                                                                Package Files (27)

                                                                                                                Dependencies (4)

                                                                                                                Dev Dependencies (0)

                                                                                                                No dev dependencies.

                                                                                                                Peer Dependencies (3)

                                                                                                                Badge

                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-instantsearch.

                                                                                                                • Markdown
                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-instantsearch)
                                                                                                                • HTML
                                                                                                                  <a href="https://www.jsdocs.io/package/react-instantsearch"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>