Skip to content

Commit

Permalink
fix(createLocalStorageRecentSearchesPlugin): apply changes from #469
Browse files Browse the repository at this point in the history
  • Loading branch information
sarahdayan committed Mar 1, 2021
1 parent 4d2e36e commit cdde339
Showing 1 changed file with 13 additions and 8 deletions.
21 changes: 13 additions & 8 deletions packages/website/docs/createLocalStorageRecentSearchesPlugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
id: createLocalStorageRecentSearchesPlugin
---

The Recent Searches plugin displays a list of the latest searches the user made on your autocomplete's empty screen.
The Recent Searches plugin displays a list of the latest searches the user made.

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).

Expand All @@ -11,9 +11,9 @@ The `createLocalStorageRecentSearchesPlugin` plugin connects with the user's [lo
First, you need to install the plugin.

```bash
yarn add @algolia/autocomplete-plugin-recent-searches
yarn add @algolia/autocomplete-plugin-recent-searches@alpha
# or
npm install @algolia/autocomplete-plugin-recent-searches
npm install @algolia/autocomplete-plugin-recent-searches@alpha
```

Then import it in your project:
Expand All @@ -25,12 +25,12 @@ import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-
If you don't use a package manager, you can use a standalone endpoint:

```html
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches"></script>
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@alpha"></script>
```

## Example

Here's a working example. It uses the plugin within [`autocomplete-js`](autocomplete-js).
This example uses the plugin within [`autocomplete-js`](autocomplete-js).

```js
import { autocomplete } from '@algolia/autocomplete-js';
Expand All @@ -47,7 +47,7 @@ autocomplete({
});
```

You can combine this plugin with the [Query Suggestions](createQuerySuggestionsPlugin) plugin to leverage the empty screen with popular and recent queries.
You can combine this plugin with the [Query Suggestions](createQuerySuggestionsPlugin) plugin to leverage the empty screen with recent and popular queries.

```js
import algoliasearch from 'algoliasearch/lite';
Expand Down Expand Up @@ -140,9 +140,9 @@ function search({ query, items, limit }) {

### `transformSource`

> `(params: { source: AutocompleteSource, onRemove: () => void })`
> `(params: { source: AutocompleteSource, onRemove: () => void, onTapAhead: () => void })`
A function to transform the source based on the Autocomplete state.
A function to transform the provided source.

#### Examples

Expand Down Expand Up @@ -201,3 +201,8 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
> `SearchParameters => SearchParameters`
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.

This function enhances the provided search parameters by:

- Excluding Query Suggestions that are already displayed in recent searches.
- Using a shared `hitsPerPage` value to get a group limit of Query Suggestions and recent searches.

0 comments on commit cdde339

Please sign in to comment.