API Reference / React InstantSearch Widgets / Answers
Widget signature
<Answers
  searchClient={object}
  queryLanguages={string[]}
  // Optional parameters
  attributesForPrediction={string[]}
  nbHits={number}
  renderDebounceTime={number}
  searchDebounceTime={number}
  answersComponent={React.Node}
/>

// Or as hook:
import { EXPERIMENTAL_useAnswers: useAnswers } from 'react-instantsearch-dom';

const {
  hits,
  isLoading,
} = useAnswers({
  searchClient,
  queryLanguages,
  // optional
  attributesForPrediction,
  nbHits,
  renderDebounceTime,
  searchDebounceTime,
});

About this widget

The Answers widget enables semantic search on an existing index. It lets you bring your users directly to the part of your content that answers their questions.

The public API of this widget may change in the near future. Thus, there is the EXPERIMENTAL_ prefix.

Examples

1
2
3
import { EXPERIMENTAL_Answers: Answers } from 'react-instantsearch-dom';

<Answers searchClient={searchClient} queryLanguages={['en']} />

Props

searchClient
type: object
Required

The search client passed to InstantSearch widget.

1
2
3
4
5
6
7
8
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

<Answers searchClient={searchClient} />
queryLanguages
type: string[]
Required

The languages in the query. Only supports en.

1
<Answers queryLanguages={['en']} />
attributesForPrediction
type: string[]
default: ["*"]
Optional

Attributes to use for predictions. If using the default (["*"]), all attributes are used to find answers.

1
<Answers attributesForPrediction={['description']} />
nbHits
type: number
default: 1
Optional

Maximum number of answers to retrieve from the Answers Engine. Can’t be greater than 1000.

1
<Answers nbHits={1} />
searchDebounceTime
type: number
default: 100
Optional

Search debounce time in milliseconds.

1
<Answers searchDebounceTime={100} />
renderDebounceTime
type: number
default: 100
Optional

Render debounce time in milliseconds.

1
<Answers renderDebounceTime={100} />
answersComponent
type: React.Node
Optional

Changes the appearance of the default answers widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function CustomAnswersComponent({ isLoading, hits }) {
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {hits.map((hit, index) => (
            <li key={index}>
              {JSON.stringify(hit)}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

<Answers answersComponent={CustomAnswersComponent} />

HTML output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  <div class="ais-Answers">
  <div class="ais-Answers-header">
    ...
  </div>
  <div class="ais-Answers-loader">
    ...
  </div>
  <ul class="ais-Answers-list">
    <li class="ais-Answers-item">
      ...
    </li>
    <li class="ais-Answers-item">
      ...
    </li>
    ...
  </ul>
</div>

Did you find this page helpful?