Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Library Overview This library provides a set of React Components to integrate Yext Search onto your site. These Components are easily incorporated into a new or existing React application. They are powered by an instance of [Search Headless](https://github.com/yext/search-headless), provided to them via the `SearchHeadlessProvider`: ```tsx import { SearchHeadlessProvider, provideHeadless } from '@yext/search-headless-react'; import { SearchBar, UniversalResults } from '@yext/search-ui-react'; const config = { apiKey: '<apiKey>', experienceKey: '<experienceKey>', locale: 'en', experienceVersion: 'PRODUCTION', } const searcher = provideHeadless(config); function App() { return ( <SearchHeadlessProvider searcher={searcher}> <SearchBar /> <UniversalResults /> </SearchHeadlessProvider> ); } export default App; ``` Using this Headless instance, Components perform actions such as setting a filter or executing a search. Component `State` is also connected to the relevant portions of Headless `State`. ### Included Components The following Components are made available by the library: - [Search Bar](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.searchbar.md) - [Universal Results](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.universalresults.md) - [Vertical Results](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.verticalresults.md) - [Direct Answer](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.directanswer.md) - [Filter Search](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.filtersearch.md) - [Standard Facets](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.standardfacets.md) - [Static Filters](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.staticfilters.md) - [Spell Check](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.spellcheck.md) - [Alternative Verticals](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.alternativeverticals.md) - [Applied Filters](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.appliedfilters.md) - [Hierarchical Facets](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.hierarchicalfacets.md) - [Location Bias](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.locationbias.md) - [Numerical Facets](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.numericalfacets.md) - [Results Count](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.resultscount.md) - [Pagination](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.pagination.md) To explore these Components individually, you can access our [Component Sandbox](https://storybook.hitchhikers.yext.com). ## Using the Library If you are using NPM 7+, you can install the components with the following command: ```bash npm install @yext/search-ui-react ``` The @yext/search-headless-react peer dependency will be automatically installed. If you are using NPM 6 or Yarn, you can install the library and its peer dependencies with this command: ```bash npx install-peerdeps @yext/search-ui-react ``` The command will work with Yarn so long as NPM 6+ is installed on the machine. ### Tailwind The library uses Tailwind to provide minimal, out-of-the-box styling of the Components. To use the Component Library's Styling without adding Tailwind to your project, add the following import: ```tsx import '@yext/search-ui-react/bundle.css' ``` If you have Tailwind already, you can add our styles to your `tailwind.config.js`: ```tsx const { ComponentsContentPath } = require('@yext/search-ui-react'); module.exports = { content: [ ComponentsContentPath ], // ... the rest of your tailwind config }; ```
- Loading branch information