---
title: "Highlight"
slug: "highlight"
abstract: "Overview of the integration architecture and options when using Search, JS SDK for React."
---
# 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*<br><br>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.

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