Working nicely

Author: adhamu

src/SearchSuggestions.tsx

@@ -15,6 +15,7 @@ const SearchSuggestions = ({
   withTheme = false,
   id,
   onChange,
+  highlightKeywords = false,
 }: Props): JSX.Element => {
   const [results, setResults] = React.useState<React.ReactNode[]>(suggestions)
   const inputSearchRef = React.useRef<HTMLInputElement>(null)
@@ -61,7 +62,12 @@ const SearchSuggestions = ({
                 onMouseOver={onResultsHover}
                 onKeyDown={onResultsKeyDown}
               >
-                {wrapElementText(suggestion, inputSearchRef.current?.value)}
+                {highlightKeywords
+                  ? wrapElementText(
+                      suggestion,
+                      inputSearchRef.current?.value || ''
+                    )
+                  : suggestion}
               </li>
             ))}
           </ul>

src/elementText.tsx

@@ -18,31 +18,36 @@ export const getElementText = (node: React.ReactNode): string | undefined => {
   return undefined
 }
 
+const highlightKeyword = (content: string, keyword: string) =>
+  reactStringReplace(content, keyword, (match, key) => (
+    <mark key={key}>{match}</mark>
+  ))
+
+const cloneChildren = (children: React.ReactElement[], keyword: string): any =>
+  React.Children.map(children, child =>
+    child.props
+      ? React.cloneElement(child, {
+          children: highlightKeyword(
+            cloneChildren(child.props.children, keyword),
+            keyword
+          ),
+        })
+      : child
+  )
+
 export const wrapElementText = (
   node: React.ReactNode,
-  str: string | undefined
+  keyword: string
 ): React.ReactElement | React.ReactNode => {
+  const n = node as React.ReactElement
   const {
     props: { children },
-  } = node as React.ReactElement
-
-  if (!Array.isArray(children) && typeof children !== 'string') {
-    return wrapElementText(children, str)
-  }
+  } = n
 
-  if (Array.isArray(children)) {
-    return children.map((e: React.ReactElement) => wrapElementText(e, str))
-  }
-
-  return React.cloneElement(node as React.ReactElement, {
-    children: (
-      <span>
-        {reactStringReplace(children, str, (match, key) => (
-          <mark key={key}>{match}</mark>
-        ))}
-      </span>
-    ),
+  return React.cloneElement(n, {
+    children:
+      typeof children === 'string'
+        ? highlightKeyword(children, keyword)
+        : cloneChildren(children, keyword),
   })
-
-  return node
 }

src/example/App.tsx

@@ -65,15 +65,18 @@ const suggestions = [
       console.log(word)
     }}
   >
-    <div>{word}</div>
+    <div>
+      <div>{word}</div>
+    </div>
   </a>
 ))
 
 const App = (): JSX.Element => (
   <SearchSuggestions
     suggestions={suggestions}
-    autoFocus={true}
-    withTheme={true}
+    autoFocus
+    withTheme
+    highlightKeywords
   />
 )
 

src/types.ts

@@ -9,4 +9,5 @@ export type Props = {
   autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   withTheme?: boolean
+  highlightKeywords?: boolean
 }