Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Answers -> Search #143

Merged
merged 5 commits into from
Jul 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Contains information from the language-subtag-registry JSON Database (https://github.com/mattcg/language-subtag-registry/tree/master/data/json)
which is made available under the ODC Attribution License (https://github.com/mattcg/language-subtag-registry/blob/master/LICENSE.md).

The Answers Headless React files listed in this repository are licensed under the below license. All other features and products are subject to
The Search Headless React files listed in this repository are licensed under the below license. All other features and products are subject to
separate agreements and certain functionality requires paid subscriptions to Yext products.

BSD 3-Clause License
Expand Down
84 changes: 42 additions & 42 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,114 +1,114 @@
# Answers Headless React
# Search Headless React

Answers Headless React is the official React UI Bindings layer for [Answers Headless](https://www.npmjs.com/package/@yext/answers-headless).
Search Headless React is the official React UI Bindings layer for [Search Headless](https://www.npmjs.com/package/@yext/search-headless).

Written in 100% TypeScript.

<div>
<a href="https://npmjs.org/package/@yext/answers-headless-react">
<img src="https://img.shields.io/npm/v/@yext/answers-headless-react" alt="NPM version"/>
<a href="https://npmjs.org/package/@yext/search-headless-react">
<img src="https://img.shields.io/npm/v/@yext/search-headless-react" alt="NPM version"/>
</a>
<a href="./LICENSE">
<img src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" alt="License"/>
</a>
<a href='https://coveralls.io/github/yext/answers-headless-react?branch=main'>
<img src='https://coveralls.io/repos/github/yext/answers-headless-react/badge.svg?branch=main' alt='Coverage Status' />
<a href='https://coveralls.io/github/yext/search-headless-react?branch=main'>
<img src='https://coveralls.io/repos/github/yext/search-headless-react/badge.svg?branch=main' alt='Coverage Status' />
</a>
</div>
<br>

## Installation

```shell
npm install @yext/answers-headless-react
npm install @yext/search-headless-react
```

## Getting Started - `AnswersHeadlessProvider`
## Getting Started - `SearchHeadlessProvider`

Answers Headless React includes an `<AnswersHeadlessProvider />` component, which instantiates an AnswersHeadless instance and makes it available to the rest of your app.
Search Headless React includes an `<SearchHeadlessProvider />` component, which instantiates an SearchHeadless instance and makes it available to the rest of your app.

```tsx
import { AnswersHeadlessProvider } from '@yext/answers-headless-react';
import { SearchHeadlessProvider } from '@yext/search-headless-react';
import SearchBar from './SearchBar';
import MostRecentSearch from './MostRecentSearch';
import UniversalResults from './UniversalResults';

function MyApp() {
return (
<AnswersHeadlessProvider
<SearchHeadlessProvider
apiKey='your api key'
experienceKey='your experience key'
locale='en'
>
{/* Add components that use Answers as children */}
{/* Add components that use Search as children */}
<SearchBar/>
<MostRecentSearch/>
<UniversalResults/>
</AnswersHeadlessProvider>
</SearchHeadlessProvider>
);
}
```

## Respond to State Updates with `useAnswersState`
## Respond to State Updates with `useSearchState`

`useAnswersState` reads a value from the `AnswersHeadless` state and subscribes to updates.
`useSearchState` reads a value from the `SearchHeadless` state and subscribes to updates.

```tsx
import { useAnswersState } from '@yext/answers-headless-react';
import { useSearchState } from '@yext/search-headless-react';

export default function MostRecentSearch() {
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
const mostRecentSearch = useAnswersState(state => state.query.mostRecentSearch);
const mostRecentSearch = useSearchState(state => state.query.mostRecentSearch);
return <div>Showing results for {mostRecentSearch}</div>;
}
```

## Dispatch Actions with `useAnswersActions`
## Dispatch Actions with `useSearchActions`

`useAnswersActions` allows you to dispatch actions using the `AnswersHeadless` instance.
`useSearchActions` allows you to dispatch actions using the `SearchHeadless` instance.

These include performing searches, getting autocomplete suggestions, and adding filters.

For a full list of capabilities see [the answers-headless docs](https://www.npmjs.com/package/@yext/answers-headless).
For a full list of capabilities see [the search-headless docs](https://www.npmjs.com/package/@yext/search-headless).

```tsx
import { useAnswersActions } from '@yext/answers-headless-react';
import { useSearchActions } from '@yext/search-headless-react';
import { ChangeEvent, KeyboardEvent, useCallback } from 'react';

function SearchBar() {
const answers = useAnswersActions();
const search = useSearchActions();
const handleTyping = useCallback((e: ChangeEvent<HTMLInputElement>) => {
answers.setQuery(e.target.value);
}, [answers]);
search.setQuery(e.target.value);
}, [search]);

const handleKeyDown = useCallback((evt: KeyboardEvent<HTMLInputElement>) => {
if (evt.key === 'Enter' ) {
answers.executeUniversalQuery();
search.executeUniversalQuery();
}
}, [answers]);
}, [search]);

return <input onChange={handleTyping} onKeyDown={handleKeyDown}/>;
}
```

## `AnswersHeadlessContext`
## `SearchHeadlessContext`
### Class Components
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved

For users that want to use class components instead of functional components, you can use the `AnswersHeadlessContext` directly to dispatch actions and receive updates from state.
For 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.

As an example, here is our simple SearchBar again, rewritten as a class using `AnswersHeadlessContext`.
As an example, here is our simple SearchBar again, rewritten as a class using `SearchHeadlessContext`.

```tsx
import { AnswersHeadlessContext, AnswersHeadless, State } from '@yext/answers-headless-react';
import { SearchHeadlessContext, SearchHeadless, State } from '@yext/search-headless-react';
import { Component } from 'react';

export default class Searcher extends Component {
static contextType = AnswersHeadlessContext;
static contextType = SearchHeadlessContext;
unsubscribeQueryListener: any;
state = { query: "" };

componentDidMount() {
const answers: AnswersHeadless = this.context;
this.unsubscribeQueryListener = answers.addListener({
const search: SearchHeadless = this.context;
this.unsubscribeQueryListener = search.addListener({
valueAccessor: (state: State) => state.query.mostRecentSearch,
callback: newPropsFromState => {
this.setState({ query: newPropsFromState })
Expand All @@ -121,15 +121,15 @@ export default class Searcher extends Component {
}

render() {
const answers: AnswersHeadless = this.context;
const search: SearchHeadless = this.context;
return (
<div>
<p>Query: {this.state.query}</p>
<input
onChange={evt => answers.setQuery(evt.target.value)}
onChange={evt => search.setQuery(evt.target.value)}
onKeyDown={evt => {
if (evt.key === 'Enter') {
answers.executeUniversalQuery();
search.executeUniversalQuery();
}
}}
/>
Expand All @@ -139,14 +139,14 @@ export default class Searcher extends Component {
}
```

## `useAnswersUtilities`
## `useSearchUtilities`

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.
We offer a `useSearchUtilities` convenience hook for accessing `SearchHeadless.utilities`, which offers a number of stateless utility methods.
The `searchUtilities` and `searchUtilitiesFromActions` variables below are equivalent.

For class components, you can access `AnswersUtilities` through `AnswersHeadlessContext`.
For class components, you can access `SearchUtilities` through `SearchHeadlessContext`.

```ts
const answersUtilities = useAnswersUtilities();
const answersUtilitiesFromActions = useAnswersActions().utilities;
const searchUtilities = useSearchUtilities();
const searchUtilitiesFromActions = useSearchActions().utilities;
```
10 changes: 5 additions & 5 deletions THIRD-PARTY-NOTICES
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ SOFTWARE.

The following NPM package may be included in this product:

- @yext/answers-core@1.7.0
- @yext/search-core@1.8.0

This package contains the following license and notice below:

The Answers Core files listed in this repository are licensed under the below license.  All other features and products are subject to separate agreements
The Search Core files listed in this repository are licensed under the below license.  All other features and products are subject to separate agreements
and certain functionality requires paid subscriptions to Yext products.

Contains information from the language-subtag-registry JSON Database (https://github.com/mattcg/language-subtag-registry/tree/master/data/json)
Expand Down Expand Up @@ -106,19 +106,19 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The following NPM package may be included in this product:

- @yext/answers-headless@1.2.0
- @yext/search-headless@1.3.0

This package contains the following license and notice below:

The Answers Headless files listed in this repository are licensed under the below license.  All other features and products are subject to separate agreements
The Search Headless files listed in this repository are licensed under the below license.  All other features and products are subject to separate agreements
and certain functionality requires paid subscriptions to Yext products.

Contains information from the language-subtag-registry JSON Database (https://github.com/mattcg/language-subtag-registry/tree/master/data/json)
which is made available under the ODC Attribution License (https://github.com/mattcg/language-subtag-registry/blob/master/LICENSE.md).

BSD 3-Clause License

Copyright (c) 2021, Yext
Copyright (c) 2022, Yext
All rights reserved.

Redistribution and use in source and binary forms, with or without
Expand Down
96 changes: 48 additions & 48 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading