
Security News
Official Go SDK for MCP in Development, Stable Release Expected in August
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.
@yext/answers-headless-react
Advanced tools
Answers Headless React is the official React UI Bindings layer for [Answers Headless](https://www.npmjs.com/package/@yext/answers-headless).
Answers Headless React is the official React UI Bindings layer for Answers Headless.
Written in 100% TypeScript.
npm install @yext/answers-headless-react
AnswersHeadlessProvider
Answers Headless React includes an <AnswersHeadlessProvider />
component, which instantiates an AnswersHeadless instance and makes it available to the rest of your app.
import { AnswersHeadlessProvider } from '@yext/answers-headless-react';
import SearchBar from './SearchBar';
import MostRecentSearch from './MostRecentSearch';
import UniversalResults from './UniversalResults';
function MyApp() {
return (
<AnswersHeadlessProvider
apiKey='your api key'
experienceKey='your experience key'
locale='en'
>
{/* Add components that use Answers as children */}
<SearchBar/>
<MostRecentSearch/>
<UniversalResults/>
</AnswersHeadlessProvider>
);
}
useAnswersState
useAnswersState
reads a value from the AnswersHeadless
state and subscribes to updates.
import { useAnswersState } from '@yext/answers-headless-react';
export default function MostRecentSearch() {
const mostRecentSearch = useAnswersState(state => state.query.mostRecentSearch);
return <div>Showing results for {mostRecentSearch}</div>;
}
useAnswersActions
useAnswersActions
allows you to dispatch actions using the AnswersHeadless
instance.
These include performing searches, getting autocomplete suggestions, and adding filters.
For a full list of capabilities see the answers-headless docs.
import { useAnswersActions } from '@yext/answers-headless-react';
import { ChangeEvent, KeyboardEvent, useCallback } from 'react';
function SearchBar() {
const answers = useAnswersActions();
const handleTyping = useCallback((e: ChangeEvent<HTMLInputElement>) => {
answers.setQuery(e.target.value);
}, [answers]);
const handleKeyDown = useCallback((evt: KeyboardEvent<HTMLInputElement>) => {
if (evt.key === 'Enter' ) {
answers.executeUniversalQuery();
}
}, [answers]);
return <input onChange={handleTyping} onKeyDown={handleKeyDown}/>;
}
For users that want to use class components instead of functional components, you can use the AnswersHeadlessContext
directly to dispatch actions, and the subscribeToStateUpdates
HOC to receive updates from state.
These also work with functional components.
subscribeToStateUpdates
Here is our MostRecentSearch component again, rewritten as a class with subscribeToStateUpdates
.
import { subscribeToStateUpdates } from '@yext/answers-headless-react';
import { Component } from 'react';
interface Props {
mostRecentSearch: string
}
class MostRecentSearch extends Component<Props> {
render() {
return <div>Showing results for {this.props.mostRecentSearch}</div>;
}
}
export default subscribeToStateUpdates(state => ({
mostRecentSearch: state.query.mostRecentSearch
}))(MostRecentSearch);
AnswersHeadlessContext
And here is our simple SearchBar again, rewritten as a class using AnswersHeadlessContext
.
import { AnswersHeadlessContext, AnswersHeadless } from '@yext/answers-headless-react';
import { Component } from 'react';
export default class Searcher extends Component {
static contextType = AnswersHeadlessContext;
render() {
const answers: AnswersHeadless = this.context;
return <input
onChange={evt => answers.setQuery(evt.target.value)}
onKeyDown={evt => {
if (evt.key === 'Enter') {
answers.executeUniversalQuery();
}
}}
/>
}
}
useAnswersUtilities
We offer a useAnswersUtilities
convenience hook for accessing AnswersHeadless.utilities
, which offers a number of stateless utility methods.
The answersUtilities
and answersUtilitiesFromActions
variables below are equivalent.
For class components, you can access AnswersUtilities
through AnswersHeadlessContext
.
const answersUtilities = useAnswersUtilities();
const answersUtilitiesFromActions = useAnswersActions().utilities;
FAQs
Answers Headless React is the official React UI Bindings layer for [Answers Headless](https://www.npmjs.com/package/@yext/answers-headless).
We found that @yext/answers-headless-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 98 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.
Security News
New research reveals that LLMs often fake understanding, passing benchmarks but failing to apply concepts or stay internally consistent.
Security News
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.