docs(example): add example of Highlight implemented in React (#848)

Author: gfortaine

examples/react-renderer/src/Autocomplete.tsx

@@ -8,6 +8,7 @@ import { Hit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch/lite';
 import React from 'react';
 
+import { Highlight } from './Highlight';
 import { ClearIcon } from './ClearIcon';
 import { SearchIcon } from './SearchIcon';
 
@@ -63,8 +64,6 @@ export function Autocomplete(
                       query,
                       params: {
                         hitsPerPage: 5,
-                        highlightPreTag: '<mark>',
-                        highlightPostTag: '</mark>',
                       },
                     },
                   ],
@@ -173,11 +172,9 @@ export function Autocomplete(
                                 <div className="aa-ItemContentBody">
                                   <div
                                     className="aa-ItemContentTitle"
-                                    dangerouslySetInnerHTML={{
-                                      __html: item._highlightResult!.name!
-                                        .value,
-                                    }}
-                                  />
+                                  >
+                                    <Highlight hit={item} attribute="name" />
+                                  </div>
                                   <div className="aa-ItemContentDescription">
                                     By <strong>{item.brand}</strong> in{' '}
                                     <strong>{item.categories[0]}</strong>

examples/react-renderer/src/Highlight.tsx

@@ -0,0 +1,39 @@
+import { createElement, Fragment } from "react";
+import { parseAlgoliaHitHighlight } from "@algolia/autocomplete-preset-algolia";
+
+type HighlightHitParams<THit> = {
+  /**
+   * The Algolia hit whose attribute to retrieve the highlighted parts from.
+   */
+  hit: THit;
+  /**
+   * The attribute to retrieve the highlighted parts from.
+   *
+   * You can use the array syntax to reference nested attributes.
+   */
+  attribute: keyof THit | string[];
+  /**
+   * The tag name to use for highlighted parts.
+   *
+   * @default "mark"
+   */
+  tagName?: string;
+};
+
+export function Highlight<THit>({
+  hit,
+  attribute,
+  tagName = "mark",
+}: HighlightHitParams<THit>): JSX.Element {
+  return createElement(
+    Fragment,
+    {},
+    parseAlgoliaHitHighlight<THit>({ hit, attribute }).map(
+      ({ value, isHighlighted }, index) => {
+        if (isHighlighted) return createElement(tagName, { key: index }, value);
+
+        return value;
+      }
+    )
+  );
+}