react-highlight-words: Add type information for new unhighlightTag property

types/react-highlight-words/index.d.ts

@@ -54,6 +54,11 @@ export interface HighlighterProps {
     unhighlightClassName?: string | undefined;
     /** Inline styles applied to unhighlighted text */
     unhighlightStyle?: React.CSSProperties | undefined;
+    /**
+     * Type of tag to wrap around unhighlighted matches; defaults to span but can also be a React element
+     * (class or functional)
+     */
+    unhighlightTag?: string | React.ComponentType<any> | undefined;
     /** Allows to pass through any parameter to wrapped component */
     [index: string]: any;
 }

types/react-highlight-words/package.json

@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@types/react-highlight-words",
-    "version": "0.16.9999",
+    "version": "0.20.9999",
     "projects": [
         "https://github.com/bvaughn/react-highlight-words#readme"
     ],

types/react-highlight-words/react-highlight-words-tests.tsx

@@ -7,6 +7,7 @@ const findChunks = ({
 }: FindChunks) => [];
 
 const CustomHighlight: React.FC<{ children?: React.ReactNode }> = ({ children }) => <span>{children}</span>;
+const CustomUnhighlight: React.FC<{ children?: React.ReactNode }> = ({ children }) => <span>{children}</span>;
 
 class HighlighterTest extends React.Component {
     render() {
@@ -41,6 +42,24 @@ class HighlighterTest extends React.Component {
                     unhighlightClassName="unhighlightClassName"
                     unhighlightStyle={{ color: "red" }}
                 />
+                <Highlighter
+                    activeClassName="activeClassName"
+                    activeIndex={1}
+                    activeStyle={{ color: "red" }}
+                    autoEscape={true}
+                    className="className"
+                    caseSensitive={true}
+                    findChunks={findChunks}
+                    highlightClassName="highlightClassName"
+                    highlightStyle={{ color: "red" }}
+                    highlightTag={CustomHighlight}
+                    sanitize={(text: string) => text}
+                    searchWords={["el", "or"]}
+                    textToHighlight="Hello World"
+                    unhighlightClassName="unhighlightClassName"
+                    unhighlightStyle={{ color: "red" }}
+                    unhighlightTag={CustomUnhighlight}
+                />
             </div>
         );
     }