{"id":23692458,"url":"https://github.com/yext/search-headless-react","last_synced_at":"2025-09-02T20:33:07.281Z","repository":{"id":37080222,"uuid":"391190402","full_name":"yext/search-headless-react","owner":"yext","description":"React UI bindings for the @yext/search-headless library","archived":false,"fork":false,"pushed_at":"2024-09-19T21:35:56.000Z","size":3886,"stargazers_count":6,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-12-04T23:26:08.498Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yext.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-30T21:22:35.000Z","updated_at":"2024-09-19T19:17:10.000Z","dependencies_parsed_at":"2023-01-22T14:01:22.266Z","dependency_job_id":"4bf0d703-b7fb-4e44-8670-61aafb9fa113","html_url":"https://github.com/yext/search-headless-react","commit_stats":null,"previous_names":["yext/answers-headless-react"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fsearch-headless-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fsearch-headless-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fsearch-headless-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fsearch-headless-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yext","download_url":"https://codeload.github.com/yext/search-headless-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231810495,"owners_count":18429999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-30T03:27:58.074Z","updated_at":"2024-12-30T03:28:02.932Z","avatar_url":"https://github.com/yext.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Search Headless React\n\nSearch Headless React is the official React UI Bindings layer for [Search Headless](https://www.npmjs.com/package/@yext/search-headless).\n\nWritten in 100% TypeScript.\n\n\u003cdiv\u003e\n  \u003ca href=\"https://npmjs.org/package/@yext/search-headless-react\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@yext/search-headless-react\" alt=\"NPM version\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-BSD%203--Clause-blue.svg\" alt=\"License\"/\u003e\n  \u003c/a\u003e\n  \u003ca href='https://coveralls.io/github/yext/search-headless-react?branch=main'\u003e\n    \u003cimg src='https://coveralls.io/repos/github/yext/search-headless-react/badge.svg?branch=main' alt='Coverage Status' /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n## Installation\n\n```shell\nnpm install @yext/search-headless-react\n```\n\n## Getting Started - `SearchHeadlessProvider`\n\nSearch Headless React includes an `\u003cSearchHeadlessProvider /\u003e` component, which takes in a `SearchHeadless` instance and makes it available to the rest of your app. `SearchHeadless` instance is created using `provideHeadless(...)` with the appropriate credentials:\n\n```tsx\nimport { provideHeadless, SearchHeadlessProvider } from '@yext/search-headless-react';\nimport SearchBar from './SearchBar';\nimport MostRecentSearch from './MostRecentSearch';\nimport UniversalResults from './UniversalResults';\n\nconst searcher = provideHeadless(config);\n\nfunction MyApp() {\n  return (\n    \u003cSearchHeadlessProvider searcher={searcher}\u003e\n      {/* Add components that use Search as children */}\n      \u003cSearchBar/\u003e\n      \u003cMostRecentSearch/\u003e\n      \u003cUniversalResults/\u003e\n    \u003c/SearchHeadlessProvider\u003e\n  );\n}\n```\n\n## Respond to State Updates with `useSearchState`\n\n`useSearchState` reads a value from the `SearchHeadless` state and subscribes to updates.\n\n```tsx\nimport { useSearchState } from '@yext/search-headless-react';\n\nexport default function MostRecentSearch() {\n  const mostRecentSearch = useSearchState(state =\u003e state.query.mostRecentSearch);\n  return \u003cdiv\u003eShowing results for {mostRecentSearch}\u003c/div\u003e;\n}\n```\n\n## Dispatch Actions with `useSearchActions`\n\n`useSearchActions` allows you to dispatch actions using the `SearchHeadless` instance.\n\nThese include performing searches, getting autocomplete suggestions, and adding filters.\n\nFor a full list of capabilities see [the search-headless docs](https://www.npmjs.com/package/@yext/search-headless).\n\n```tsx\nimport { useSearchActions } from '@yext/search-headless-react';\nimport { ChangeEvent, KeyboardEvent, useCallback } from 'react';\n\nfunction SearchBar() {\n  const search = useSearchActions();\n  const handleTyping = useCallback((e: ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n    search.setQuery(e.target.value);\n  }, [search]);\n  \n  const handleKeyDown = useCallback((evt: KeyboardEvent\u003cHTMLInputElement\u003e) =\u003e {\n    if (evt.key === 'Enter' ) {\n      search.executeUniversalQuery();\n    }\n  }, [search]);\n\n  return \u003cinput onChange={handleTyping} onKeyDown={handleKeyDown}/\u003e;\n}\n```\n\n## `SearchHeadlessContext`\n### Class Components\n\nFor users that want to use class components instead of functional components, you can use the `SearchHeadlessContext` directly to dispatch actions and receive updates from state.\n\nAs an example, here is our simple SearchBar again, rewritten as a class using `SearchHeadlessContext`.\n\n```tsx\nimport { SearchHeadlessContext, SearchHeadless, State } from '@yext/search-headless-react';\nimport { Component } from 'react';\n\nexport default class Searcher extends Component {\n  static contextType = SearchHeadlessContext;\n  unsubscribeQueryListener: any;\n  state = { query: \"\" };\n\n  componentDidMount() {\n    const search: SearchHeadless = this.context;\n    this.unsubscribeQueryListener = search.addListener({\n      valueAccessor: (state: State) =\u003e state.query.mostRecentSearch,\n      callback: newPropsFromState =\u003e {\n        this.setState({ query: newPropsFromState })\n      }\n    });\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeQueryListener();\n  }\n\n  render() {\n    const search: SearchHeadless = this.context;\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eQuery: {this.state.query}\u003c/p\u003e\n        \u003cinput\n          onChange={evt =\u003e search.setQuery(evt.target.value)}\n          onKeyDown={evt =\u003e {\n            if (evt.key === 'Enter') {\n              search.executeUniversalQuery();\n            }\n          }}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## `useSearchUtilities`\n\nWe offer a `useSearchUtilities` convenience hook for accessing `SearchHeadless.utilities`, which offers a number of stateless utility methods.\nThe `searchUtilities` and `searchUtilitiesFromActions` variables below are equivalent.\n\nFor class components, you can access `SearchUtilities` through `SearchHeadlessContext`.\n\n```ts\nconst searchUtilities = useSearchUtilities();\nconst searchUtilitiesFromActions = useSearchActions().utilities;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyext%2Fsearch-headless-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyext%2Fsearch-headless-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyext%2Fsearch-headless-react/lists"}