docs(examples): update React Custom Renderer example (#577)

examples/react-renderer/package.json

@@ -9,9 +9,9 @@
     "@algolia/autocomplete-theme-classic": "1.0.0",
     "@algolia/client-search": "4.9.1",
     "algoliasearch": "4.9.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-scripts": "4.0.1"
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

examples/react-renderer/public/index.html

@@ -4,13 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <title>React Renderer | Autocomplete</title>

examples/react-renderer/src/Autocomplete.tsx

@@ -17,10 +17,11 @@ const searchClient = algoliasearch(
 );
 
 type AutocompleteItem = Hit<{
-  objectID: string;
-  name: string;
-  description: string;
+  brand: string;
+  categories: string[];
   image: string;
+  name: string;
+  objectID: string;
   url: string;
 }>;
 
@@ -64,8 +65,6 @@ export function Autocomplete(
                         hitsPerPage: 5,
                         highlightPreTag: '<mark>',
                         highlightPostTag: '</mark>',
-                        attributesToSnippet: ['name:10', 'description:35'],
-                        snippetEllipsisText: '…',
                       },
                     },
                   ],
@@ -163,7 +162,7 @@ export function Autocomplete(
                           >
                             <div className="aa-ItemWrapper">
                               <div className="aa-ItemContent">
-                                <div className="aa-ItemIcon">
+                                <div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
                                   <img
                                     src={item.image}
                                     alt={item.name}
@@ -175,16 +174,14 @@ export function Autocomplete(
                                   <div
                                     className="aa-ItemContentTitle"
                                     dangerouslySetInnerHTML={{
-                                      __html: item._snippetResult!.name.value,
-                                    }}
-                                  />
-                                  <div
-                                    className="aa-ItemContentDescription"
-                                    dangerouslySetInnerHTML={{
-                                      __html: item._snippetResult!.description
+                                      __html: item._highlightResult!.name!
                                         .value,
                                     }}
                                   />
+                                  <div className="aa-ItemContentDescription">
+                                    By <strong>{item.brand}</strong> in{' '}
+                                    <strong>{item.categories[0]}</strong>
+                                  </div>
                                 </div>
                               </div>
                               <div className="aa-ItemActions">

examples/react-renderer/src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 
 import '@algolia/autocomplete-theme-classic';
 
-import './reset.css';
 import './index.css';
 import { App } from './App';