Skip to content

Commit c59b144

Browse files
authored
docs(createLocalStorageRecentSearchesPlugin): rewrite docs (#470)
* docs(createLocalStorageRecentSearchesPlugin): rewrite docs * fix(createLocalStorageRecentSearchesPlugin): apply changes from #469
1 parent 5991e77 commit c59b144

File tree

1 file changed

+50
-13
lines changed

1 file changed

+50
-13
lines changed

packages/website/docs/createLocalStorageRecentSearchesPlugin.md

Lines changed: 50 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,37 @@
22
id: createLocalStorageRecentSearchesPlugin
33
---
44

5+
The Recent Searches plugin displays a list of the latest searches the user made.
6+
7+
The `createLocalStorageRecentSearchesPlugin` plugin connects with the user's [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to fetch and save recent searches. To plug your own storage, check [`createRecentSearchesPlugin`](createRecentSearchesPlugin).
8+
9+
## Installation
10+
11+
First, you need to install the plugin.
12+
13+
```bash
14+
yarn add @algolia/autocomplete-plugin-recent-searches@alpha
15+
# or
16+
npm install @algolia/autocomplete-plugin-recent-searches@alpha
17+
```
18+
19+
Then import it in your project:
20+
21+
```js
22+
import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
23+
```
24+
25+
If you don't use a package manager, you can use a standalone endpoint:
26+
27+
```html
28+
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@alpha"></script>
29+
```
30+
531
## Example
632

7-
```ts
33+
This example uses the plugin within [`autocomplete-js`](autocomplete-js).
34+
35+
```js
836
import { autocomplete } from '@algolia/autocomplete-js';
937
import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
1038

@@ -19,9 +47,9 @@ autocomplete({
1947
});
2048
```
2149

22-
With [Query Suggestions](createQuerySuggestionsPlugin):
50+
You can combine this plugin with the [Query Suggestions](createQuerySuggestionsPlugin) plugin to leverage the empty screen with recent and popular queries.
2351

24-
```ts
52+
```js
2553
import algoliasearch from 'algoliasearch/lite';
2654
import { autocomplete } from '@algolia/autocomplete-js';
2755
import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
@@ -49,26 +77,24 @@ autocomplete({
4977
});
5078
```
5179

52-
## Import
80+
To see it in action, check [this demo on CodeSandbox](https://fzb4m.csb.app/).
5381

54-
```ts
55-
import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
56-
```
57-
58-
## Params
82+
## Parameters
5983

6084
### `key`
6185

6286
> `string` | required
6387
64-
The Local Storage key (prefixed by the plugin) to identify where to store and retrieve the recent searches.
88+
A local storage key to identify where to save and retrieve the recent searches.
6589

66-
Examples:
90+
For example:
6791

6892
- `"navbar"`
6993
- `"search"`
7094
- `"main"`
7195

96+
The plugin namespaces all keys to avoid collisions.
97+
7298
### `limit`
7399

74100
> `number`
@@ -79,6 +105,8 @@ The number of recent searches to display.
79105

80106
> `(params: { query: string; items: TItem[]; limit: number; }) => TItem[]`
81107
108+
A search function to retrieve recent searches from. This function is called in [`storage.getAll`](createRecentSearchesPlugin#storage) to retrieve recent searches and is useful to filter and highlight recent searches when typing a query.
109+
82110
#### Example
83111

84112
```ts
@@ -112,9 +140,11 @@ function search({ query, items, limit }) {
112140

113141
### `transformSource`
114142

115-
> `(params: { source: AutocompleteSource, onRemove: () => void })`
143+
> `(params: { source: AutocompleteSource, onRemove: () => void, onTapAhead: () => void })`
116144
117-
#### Example
145+
A function to transform the provided source.
146+
147+
#### Examples
118148

119149
Keeping the panel open on select:
120150

@@ -169,3 +199,10 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
169199
#### `getAlgoliaSearchParams`
170200

171201
> `SearchParameters => SearchParameters`
202+
203+
Optimized [Algolia search parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/). This is useful when using the plugin along with the [Query Suggestions](createQuerySuggestionsPlugin) plugin.
204+
205+
This function enhances the provided search parameters by:
206+
207+
- Excluding Query Suggestions that are already displayed in recent searches.
208+
- Using a shared `hitsPerPage` value to get a group limit of Query Suggestions and recent searches.

0 commit comments

Comments
 (0)