nikon/docsearch
1
0
Fork 0
Code Activity Actions

docs: document resultsFooterComponent (#1379)

Browse source 
Co-authored-by: Clément Vannicatte <vannicattec@gmail.com>
This commit is contained in:
Sarah German 2022-04-26 02:30:04 -05:00 committed by GitHub
parent c4cde4c2e2
commit 9cc9801f6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
packages/website/docs/api.mdx
View file

@ -192,6 +192,42 @@ When provided, an informative message wrapped with your link will be displayed o
/>
</div>
## `resultsFooterComponent`
> `type: ({ state }) => JSX.Element` | **optional**
The component to display below the search results.
You get access to the [current state](https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-core/src/types/AutocompleteState.ts) which allows you to retrieve the number of hits returned, the query etc.
[You can find a working example without JSX in this sandbox](https://codesandbox.io/s/docsearch-v3-resultsfootercomponent-without-jsx-jperd5).
```js
docsearch({
// ...
resultsFooterComponent({ state }) {
return {
// The HTML `tag`
type: 'a',
ref: undefined,
constructor: undefined,
key: state.query,
// Its props
props: {
href: 'https://docsearch.algolia.com/apply',
target: '_blank',
onClick: (event) => {
console.log(event);
},
// Raw text rendered in the HTML element
children: `${state.context.nbHits} hits found!`,
},
__v: null,
};
},
});
```
</TabItem>
<TabItem value="react">
@ -352,6 +388,25 @@ When provided, an informative message wrapped with your link will be displayed o
/>
</div>
## `resultsFooterComponent`
> `type: ({ state }) => JSX.Element` | **optional**
The component to display below the search results.
You get access to the [current state](https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-core/src/types/AutocompleteState.ts) which allows you to retrieve the number of hits returned, the query etc.
[You can find a working example in this sandbox](https://codesandbox.io/s/docsearch-v3-resultsfootercomponent-wzie9y).
```jsx
<DocSearch
// ...
resultsFooterComponent={({ state }) => {
return <h1>{state.context.nbHits} hits found</h1>;
}}
/>
```
</TabItem>
</Tabs>