@yext/search-ui-react
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

search-ui-react


A library of React Components for powering Yext Search integrations.

See the full documentation here.

Getting Started

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.

Once the library and its peer dependencies are installed, our React Components should be nested inside the SearchHeadlessProvider. SearchHeadlessProvider requires a SearchHeadless instance, which is created using provideHeadless(...) with the appropriate credentials:

import { provideHeadless, SearchHeadlessProvider } from '@yext/search-headless-react';
import { SearchBar, UniversalResults, VerticalConfigMap } from '@yext/search-ui-react';
import { v4 as uuidv4 } from 'uuid';

const config = {
  apiKey: '<apiKey>',
  experienceKey: '<experienceKey>',
  locale: 'en',
  experienceVersion: 'PRODUCTION',
}

const searcher = provideHeadless(config);

searcher.setSessionTrackingEnabled(true);
let sessionId = window.sessionStorage.getItem('sessionId');
if (!sessionId) {
  sessionId = uuidv4();
  window.sessionStorage.setItem('sessionId', sessionId);
}
searcher.setSessionId(sessionId);

const verticalConfigMap: VerticalConfigMap = {
  help_articles: {
    label: "Help Articles"
  }
}

function App() {
  return (
    <SearchHeadlessProvider searcher={searcher}>
      <SearchBar />
      <UniversalResults verticalConfigMap={verticalConfigMap}/>
    </SearchHeadlessProvider>
  );
}

export default App;

To use the Component Library's Styling without adding Tailwind to your project, add the following import:

import '@yext/search-ui-react/bundle.css'

Install

npm i @yext/search-ui-react

DownloadsWeekly Downloads

992

Version

1.1.0

License

BSD-3-Clause

Unpacked Size

1.62 MB

Total Files

943

Last publish

Collaborators

  • atelluri
  • ydaniel
  • junpark1213
  • dsurducan
  • afriedman00
  • lilwang
  • dgurland
  • dwon
  • htamirepi
  • jihe2
  • ajgist
  • yunxiashi
  • emilyfranklin
  • msporer-yext
  • dkianersi
  • agorbaneva
  • pgill
  • snagabhirava
  • llach
  • twhiteyext
  • ewu42
  • bryanreed
  • dlsgusrn7577
  • klu
  • paigep
  • stellali
  • petya182
  • ptroupgalligan
  • kowusumensah
  • aparnagh
  • syhanley
  • andyluu
  • zhengzhi
  • icapistrano_
  • mdavis-yext
  • jimboh
  • jballschneider
  • jknutsonn
  • jamesyang14
  • jfromm
  • tobyko
  • lymarrie
  • levyshi9945
  • mkilpatrick
  • baigel1
  • koyoldc
  • nricartsanchez
  • roser11
  • dkang3021
  • xlin97
  • mleifer
  • pmomesso
  • eefi
  • mxs2019
  • jaredhood
  • nmanu
  • jrhoads
  • npark
  • lki9419
  • mancusi
  • rchhatre
  • mtusman
  • mdavish
  • apavlick
  • yext_eng_npm
  • benmcginnis
  • kunal-p
  • data-enabler
  • tmeyer2115
  • mbowman
  • jronkin_yext
  • oshi
  • svc_jenkins_consulting_yext
  • cblair_yext
  • jtufts
  • afitzgeraldyext
  • mwoon
  • cxchen
  • willgorick
  • bhaines-yext
  • aliang_yext
  • inemzer
  • zgeier
  • sgresh_yext
  • rconsalo
  • stephenrva
  • jbaik
  • sjayakumar
  • tritpham
  • hoosred
  • ttimblin
  • sharvey
  • jameshu01
  • dwuyext
  • wenright-yext
  • npatel94
  • telliottyext
  • johncho92
  • jpjamipark
  • canderson_yext
  • hgaertner
  • gweiler
  • ssaunders
  • sukim
  • rpope
  • eal172
  • peteros
  • jachen1997
  • jesuyed
  • ytruong
  • joshuahsueh