Highlight

A helper to show highlighted text provided by the Search API. Use Highlight when the information requested by SDK Query Hooks uses highlight delimiters for some of the returned fields.

API Reference

Name	Type	Description
`test`	string	The text that has the separators
`pre`	string	The pre delimiter
`post`	string	The post delimiter
`element`	string	Default strong The tag that will be used to wrap the content within delimiters.

Example

The following code blocks describe using the Highlight utility with a query hook.

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 is used as in the following code block.

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'}
      />
    </>);

If you have suggestions for improving this article, let us know!