# @magento/ds-livesearch-storefront-utils > The purpose of this project is to provide a dev-ready starting point for developers to implent the search popover. A user of this library should have a magento store instance. Latest version **1.0.8** (published 2023-09-27) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @magento/ds-livesearch-storefront-utils pnpm add @magento/ds-livesearch-storefront-utils yarn add @magento/ds-livesearch-storefront-utils bun add @magento/ds-livesearch-storefront-utils ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.0.8 | | Published | 2023-09-27 | | First published | 2022-08-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 81.4 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Kathleen Tynan | | Maintainers | arjunathreya14, aniham, bdenham, ktynan, rkostiv, kaydenalthen, jomoore-adobe, snekkalapudi, prabhuramgr, magento-owner, sirugh, depatil, deloreyj | | Keywords | adobe, magento, data solutions, live search, magento commerce, search, javascript | ## Links - npm: https://www.npmjs.com/package/@magento/ds-livesearch-storefront-utils - Repository: https://git.corp.adobe.com/magento-datalake/livesearch-storefront-utils - Homepage: https://git.corp.adobe.com/magento-datalake/livesearch-storefront-utils#readme - Issues: https://git.corp.adobe.com/magento-datalake/livesearch-storefront-utils/issues - npm.io page: https://npm.io/package/@magento/ds-livesearch-storefront-utils ## Dependencies (3) - [uuid](https://npm.io/package/uuid.md) ^9.0.0 - [preact](https://npm.io/package/preact.md) ^10.17.1 - [preact-compat](https://npm.io/package/preact-compat.md) ^3.19.0 ## 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.8 (latest) — 2023-09-27 - 1.0.7 — 2023-09-13 - 1.0.6 — 2023-07-25 - 1.0.5 — 2023-07-18 - 1.0.4 — 2023-06-29 - 1.0.3 — 2023-06-20 - 1.0.2 — 2023-06-20 - 1.0.1 — 2023-06-08 - 1.0.0 — 2023-05-15 - 0.1.18 — 2023-03-21 - 0.1.17 — 2023-03-21 - 0.1.16 — 2023-03-21 - 0.1.15 — 2023-03-13 - 0.1.14 — 2023-03-09 - 0.1.13 — 2023-03-09 - … 13 more at https://npm.io/package/@magento/ds-livesearch-storefront-utils/versions ## README ## Purpose The purpose of this project is to provide a dev-ready starting point for developers to implement the search popover. A user of this library should have a Commerce store instance. ## Usage ### Setup a livesearch instance ``` const storeDetails: StoreDetailsProps = { environmentId: , websiteCode: "base", storeCode: "main_website_store", storeViewCode: "default", searchUnitId: searchUnitId, config: { minQueryLength: 5, pageSize: 8, currencySymbol: "$", }, }; ``` ``` const searchApi = new LiveSearch(storeDetails); const { performSearch, pageSize, minQueryLength, currencySymbol } = searchApi; ``` ### Popover form react component ``` ``` ### Popover attached to html component ``` const container = document.getElementById(selectorDetails.resultsSelector); ReactDOM.render( , container, ); ``` ### Autocomplete hook to create your own popover ``` const { active, formProps, formRef, inputProps, inputRef, loading, searchTerm, results, resultsRef, setActive, setLoading, setResults, setSearchTerm, } = useAutocomplete(performSearch, minQueryLength); ``` ## Available Scripts You can run a local demo. In the project directory, you can run: ### `yarn dev` Runs the app in the development mode.
Open [http://localhost:3000/v1/index.html](http://localhost:3000/v1/index.html) to view it in the browser. ### `yarn test` Launches the test runner in the interactive watch mode.
See the section about [running tests](https://jestjs.io/docs/en/webpack) for more information. ### `yarn run build` Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
Your app is ready to be deployed! See the section about [deployment](https://webpack.js.org/guides/production/) for more information. --- ### Stories  📚 This repo supports `.story.mdx` and `.story.tsx` stories! - `MDX` stories allow you to create documentation for your component while also generating individual stories for each of the component's states that are mentioned within the documentation! - `TSX` stories allows you to create stories for different states of your component but no documentation for it. ## Contributing 🙏 1. **Fork** the repo on GitHub 2. **Clone** the project to your own machine 3. **Commit** changes to your own branch 4. **[Squash](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History#_squashing)** all your commits 5. **Push** your work back up to your fork 6. Submit a **Pull request** so that your changes can be reviewed! ## Questions ❓ Feel free to file an issue or send me an email --- _Source: https://npm.io/package/@magento/ds-livesearch-storefront-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._