diff --git a/packages/website/docs/createLocalStorageRecentSearchesPlugin.md b/packages/website/docs/createLocalStorageRecentSearchesPlugin.md index 21835171c..a389a2e51 100644 --- a/packages/website/docs/createLocalStorageRecentSearchesPlugin.md +++ b/packages/website/docs/createLocalStorageRecentSearchesPlugin.md @@ -2,9 +2,37 @@ id: createLocalStorageRecentSearchesPlugin --- +The Recent Searches plugin displays a list of the latest searches the user made on your autocomplete's empty screen. + +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). + +## Installation + +First, you need to install the plugin. + +```bash +yarn add @algolia/autocomplete-plugin-recent-searches +# or +npm install @algolia/autocomplete-plugin-recent-searches +``` + +Then import it in your project: + +```js +import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; +``` + +If you don't use a package manager, you can use a standalone endpoint: + +```html + +``` + ## Example -```ts +Here's a working example. It uses the plugin within [`autocomplete-js`](autocomplete-js). + +```js import { autocomplete } from '@algolia/autocomplete-js'; import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; @@ -19,9 +47,9 @@ autocomplete({ }); ``` -With [Query Suggestions](createQuerySuggestionsPlugin): +You can combine this plugin with the [Query Suggestions](createQuerySuggestionsPlugin) plugin to leverage the empty screen with popular and recent queries. -```ts +```js import algoliasearch from 'algoliasearch/lite'; import { autocomplete } from '@algolia/autocomplete-js'; import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; @@ -49,26 +77,24 @@ autocomplete({ }); ``` -## Import - -```ts -import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; -``` +To see it in action, check [this demo on CodeSandbox](https://fzb4m.csb.app/). -## Params +## Parameters ### `key` > `string` | required -The Local Storage key (prefixed by the plugin) to identify where to store and retrieve the recent searches. +A local storage key to identify where to save and retrieve the recent searches. -Examples: +For example: - `"navbar"` - `"search"` - `"main"` +The plugin namespaces all keys to avoid collisions. + ### `limit` > `number` @@ -79,6 +105,8 @@ The number of recent searches to display. > `(params: { query: string; items: TItem[]; limit: number; }) => TItem[]` +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. + #### Example ```ts @@ -114,7 +142,9 @@ function search({ query, items, limit }) { > `(params: { source: AutocompleteSource, onRemove: () => void })` -#### Example +A function to transform the source based on the Autocomplete state. + +#### Examples Keeping the panel open on select: @@ -169,3 +199,5 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({ #### `getAlgoliaSearchParams` > `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.