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: <Storefront_ID>,
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
<FormWithPopover
performSearch={performSearch}
submitSearchRedirect={submitSearchRedirect}
pageSize={pageSize}
minQueryLength={minQueryLength}
currencySymbol={currencySymbol}
/>
Popover attached to html component
const container = document.getElementById(selectorDetails.resultsSelector);
ReactDOM.render(
<AttachedPopover
performSearch={performSearch}
pageSize={pageSize}
minQueryLength={minQueryLength}
currencySymbol={currencySymbol}
formSelector={selectorDetails.resultsSelector}
inputSelector={selectorDetails.inputSelector}
/>,
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 to view it in the browser.
yarn test
Launches the test runner in the interactive watch mode.
See the section about
running tests 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 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 🙏
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Squash all your commits
- Push your work back up to your fork
- Submit a Pull request so that your changes can be reviewed!
Questions ❓
Feel free to file an issue or send me an email