# recent-searches > A JavaScript module to help anyone easily build recent searches functionality into their search. Latest version **1.0.5** (published 2019-12-30) · MIT license · 0 weekly downloads ## Install ```sh npm install recent-searches pnpm add recent-searches yarn add recent-searches bun add recent-searches ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.5 | | Published | 2019-12-30 | | First published | 2019-04-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 1.6 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 21 | | Author | Jonas Badalic | | Maintainers | jonasbadalic | | Keywords | search, algolia, elasticsearch, swiftype | ## Links - npm: https://www.npmjs.com/package/recent-searches - Repository: https://github.com/JonasBa/recent-searches - Homepage: https://github.com/JonasBa/recent-searches#readme - Issues: https://github.com/JonasBa/recent-searches/issues - npm.io page: https://npm.io/package/recent-searches ## Alternatives - [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads - [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads - [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads - [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads - [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads ## Recent versions - 1.0.5 (latest) — 2019-12-30 - 0.0.0-beta.2.1.1 (beta) — 2019-04-24 - 1.0.4 — 2019-12-30 - 1.0.3 — 2019-12-30 - 1.0.2 — 2019-12-30 - 1.0.1 — 2019-04-24 - 1.0.0 — 2019-04-24 - 0.0.13 — 2019-04-24 - 0.0.11 — 2019-04-24 - 0.0.1 — 2019-04-24 - 0.0.0 — 2019-04-24 - 0.0.0-beta.2.1.0 — 2019-04-12 - 0.0.0-beta.2.1 — 2019-04-12 - 0.0.0-beta.2.0 — 2019-04-12 - 0.0.0-beta.2 — 2019-04-12 - … 1 more at https://npm.io/package/recent-searches/versions ## README

recent-searches 🕵️‍♀️🕵️‍♂️

A zero dependency JavaScript module that helps anyone build recent searches functionality into their search bar.

[![Build Status][build-badge]][build] [![downloads][downloads-badge]][npmcharts] [![version][version-badge]][package] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs] [![size][size-badge]][unpkg-dist] [![gzip size][gzip-badge]][unpkg-dist] ![Example implementation](https://raw.githubusercontent.com/JonasBa/recent-searches/master/RecentSearchesUX.gif) ## The problem Building recent searches experience can be trickier than you think (expiry of queries, ranking of recent queries, handling storage etc...) ## Solution recent-searches module helps you build that experience without having to focus on the edge cases and technical details. If available, uses [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store suggestions cross sessions and in the rare cases where it might not be available uses a fallback memory storage, thus loosing it's cross session functionality. __The module handles:__ - Searching and retrieving recent searches - Ranking of searches and decaying their popularity (with different ranking options) - Saving and expiring of searches through LocalStorage or MemoryStorage - LocalStorage feature detection (with fallback to MemoryStorage) - Safe LocalStorage usage (feature detection, limiting storage) ## Table of Contents - [Installation](#installation) - [Usage](#usage) - [LICENSE](#license) ## Installation recent-searches is published on npm's public registry, you can install it as a dependancy of your project with the following command. ``` npm install --save recent-searches ``` ## Usage > [Standalone codesandbox example](https://codesandbox.io/s/8k21924m5l)
> [Algolia react-instantsearch codesandbox example](https://codesandbox.io/s/m18wjy69)
> [Algolia InstantSearch.js codesandbox example](https://codesandbox.io/s/62j3k7097r) Initializing the module ```ts import RecentSearches from 'recent-searches' const searches = new RecentSearches({ ttl: number, // Optional: ttl of searches in milliseconds, default to 24h (1000 * 60 * 60 * 24) limit: number, // Optional: max number of entries that will be persisted, default is 50 namespace: string, // Optional: custom localStorage namespace ranking: string // Optional: ranking strategy of recent searches, "PROXIMITY" | "TIME" | "PROXIMITY_AND_TIME", default is "PROXIMITY_AND_TIME" }) ``` Setting and retrieving relevant searches. ```ts // Retrieve searches for a given query const previousSearchesForJohn = searches.getRecentSearches("John") /* [ {query: "John", data: {...}, timestamp: ...}, {query: "Marc John", data: {...}, timestamp: ...} ] */ // To set a recent search searches.setRecentSearch("John", resultData) ``` If you built something using recent-searches that you want to show, feel free to send us a link and we'll include it to the documentation! ## Contributing This project is open to contributions, if you have a question, proposal or feedback please open a pull request or issue, we only ask you to be kind and respectful :) Special thanks to [Kent C. Dodds](https://twitter.com/kentcdodds?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) for building downshift (making that demo was much easier) ## LICENSE MIT [npm]: https://www.npmjs.com/ [node]: https://nodejs.org [build-badge]: https://circleci.com/gh/JonasBa/recent-searches/tree/master.svg?style=svg [build]: https://circleci.com/gh/JonasBa/recent-searches [coverage-badge]: https://img.shields.io/codecov/c/github/recent-searches/recent-searches.svg?style=flat-square [coverage]: https://codecov.io/github/recent-searches/recent-searches [version-badge]: https://img.shields.io/npm/v/recent-searches.svg?style=flat-square [package]: https://www.npmjs.com/package/recent-searches [downloads-badge]: https://img.shields.io/npm/dm/recent-searches.svg?style=flat-square [npmcharts]: http://npmcharts.com/compare/recent-searches [license-badge]: https://img.shields.io/npm/l/recent-searches.svg?style=flat-square [license]: https://github.com/recent-searches/recent-searches/blob/master/LICENSE [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square [prs]: http://makeapullrequest.com [react-badge]: https://img.shields.io/badge/%E2%9A%9B%EF%B8%8F-(p)react-00d8ff.svg?style=flat-square [react]: https://facebook.github.io/react/ [gzip-badge]: http://img.badgesize.io/https://unpkg.com/recent-searches/dist/index.min.js?compression=gzip&label=gzip%20size&style=flat-square [size-badge]: http://img.badgesize.io/https://unpkg.com/recent-searches/dist/index.min.js?label=size&style=flat-square [unpkg-dist]: https://unpkg.com/recent-searches/dist/ [module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square [spectrum-badge]: https://withspectrum.github.io/badge/badge.svg [spectrum]: https://spectrum.chat/recent-searches [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key [all-contributors]: https://github.com/kentcdodds/all-contributors [ryan]: https://github.com/ryanflorence [compound-components-lecture]: https://courses.reacttraining.com/courses/advanced-react/lectures/3060560 [react-autocomplete]: https://www.npmjs.com/package/react-autocomplete [jquery-complete]: https://jqueryui.com/autocomplete/ [examples]: https://codesandbox.io/search?refinementList%5Btags%5D%5B0%5D=recent-searches%3Aexample&page=1 [yt-playlist]: https://www.youtube.com/playlist?list=PLV5CVI1eNcJh5CTgArGVwANebCrAh2OUE --- _Source: https://npm.io/package/recent-searches · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._