v1.4.0

Version 1.4.0

Changes

• Added compatibility with PagesJS v1 (#400, #402, #404). As part of this change, support for Node 14 is dropped.

Fixes

• Upgraded @babel/traverse version to address a vulnerability in the package (#409)

v1.4.0-beta.3

Features

• PagesJS Compatibility (#400)

v1.3.4

Bug fixes

• Revert the introduction of "type": "module" from the package.json file due to issues with various integrations

v1.3.0

Version 1.3.0

Features

• Introduce new Facet components including the new Facets (#360), StandardFacet (#370), NumericalFacet (#375), and HierarchicalFacet (#373) components which support more customizability than the previous Facet components.
• Support the new RichTextV2 (Lexical) and Markdown fields which have been converted to HTML as FeaturedSnippetDirectAnswers (#379)
• Remove the Yext logo from the search bar (#376)
• Deprecate LocationBias (#338) component in favor of the new Geolocation component (#336)

Bug fixes

• Improve the UX of the search bar when long autocomplete text is returned which includes the truncation of long text (#378)

v1.2.1

Changes

• Drop React 18 support
• Pin react-collapsed to v3.6.0 which doesn't support React 18

v1.2.0

Changes

Update the search-headless-react version to v2.2.0 which supports the environment and cloudRegion config options

v1.1.0

Features

• Default behavior of FilterSearch was changed to better support Locators and Doctor Finders. Additionally, a new onSelect prop was added to the Component. The searchOnSelect prop is now deprecated. (#323, #343, #333)
• A new CSS bundle without the Tailwind resets is exported. (#322)
• We've added a MapboxMap Component, powered by v2 of their JavaScript API. (#332)

Changes

• Assorted updates to improve our GH Actions.
• Styling of Facet Headers is now exposed in FilterGroupCssClasses. (#321)

Bug Fixes

• Vulnerabilities were addressed for the repo and its test-site.
• Fixed the Dropdown Component to invoke preventDefault only when it is active. (#307)
• Corrected a small error in the generation of SSR Hydration IDs. (#315)

v1.0.2

Version 1.0.2

Bug Fixes

• Address security vulnerabilities in ejs, async, and terser (#308)
• Address security vulnerabilities in @xmldom/xmldom and loader-utils (#320, #326)

v1.0.1

Fixes

• This hot-fix resolves #294.

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
};