No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

 Highlight
A helper to show highlighted text provided by the Search API.
 API Reference
Highlight
NameDescriptionDefault
text*
Type: string.
The text that has the separators
-
pre*
Type: string.
The pre delimiter
-
post*
Type: string.
The post delimiter
-
element*
Type: string.
The tag that will be used to wrap the content within delimiters.
strong
Example usage
Highlight is recommended when the information requested using SDK Query Hooks is using highlight delimiters for some
of the returned fields. Consider the following example:
const {
    actions: {
      // actions to gather from hook
    },
    state: {
      // state of the hook
    },
    queryResult: {
      isLoading,
      isFetching,
      data: {
        // other data fields to gather
        content: articles = []
      } = {},
    },
  } = useSearchResults<MyModel, MyInitialState>({
    query: (query) => {
      query
        .getRequest()
        .setSearchQueryHighlightFragmentSize(500)
        .setSearchQueryHighlightFields(['subtitle', 'description'])
        .setSearchQueryHighlightPreTag('[open delimiter]')
        .setSearchQueryHighlightPostTag('[closing delimiter]');
    },
    state: {
      // Initial state
    },
  });
Then, at the time of rendering the information, Highlight can be used in the following way:
artciles.map(({subtitle, description}) =>
    <>
      <Highlight
        text={subtitle}
        pre={'[open delimiter]'}
        post={'[closing delimiter]'}
        element={'strong'}
      />
      <Highlight
        text={description}
        pre={'[open delimiter]'}
        post={'[closing delimiter]'}
        element={'strong'}
      />
    </>);