v1.0.0
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, provided to them via the SearchHeadlessProvider
:
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
- Universal Results
- Vertical Results
- Direct Answer
- Filter Search
- Standard Facets
- Static Filters
- Spell Check
- Alternative Verticals
- Applied Filters
- Hierarchical Facets
- Location Bias
- Numerical Facets
- Results Count
- Pagination
To explore these Components individually, you can access our Component Sandbox.
Using the Library
If you are using NPM 7+, you can install the components with the following command:
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:
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:
import '@yext/search-ui-react/bundle.css'
If you have Tailwind already, you can add our styles to your tailwind.config.js
:
const { ComponentsContentPath } = require('@yext/search-ui-react');
module.exports = {
content: [ ComponentsContentPath ],
// ... the rest of your tailwind config
};