Add React plugin to linkifyjs declaration.

types/linkifyjs/index.d.ts

@@ -1,6 +1,7 @@
 // Type definitions for linkifyjs 2.1
 // Project: https://github.com/SoapBox/linkifyjs#readme
 // Definitions by: Sean Zhu <https://github.com/szhu>
+//                 Ovidiu Bute <https://github.com/ovidiubute>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.1
 

types/linkifyjs/linkifyjs-tests.ts

@@ -1,141 +1,163 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 import linkifyHtml from "linkifyjs/html";
+import Linkify from "linkifyjs/react";
+
+declare function describe(desc: string, f: () => void): void;
+declare function it(desc: string, f: () => void): void;
 
 // From the docs here: https://soapbox.github.io/linkifyjs/docs/options.html
 
-/* attributes */
+describe("linkifyjs/html", () => {
+    /* attributes */
 
-linkifyHtml("github.com", {
-    attributes: {
-        rel: "nofollow"
-    }
-});
-
-/* className */
-
-linkifyHtml("github.com", {
-    className: "new-link--url"
-});
-
-linkifyHtml("github.com", {
-    className(href, type) {
-        return "new-link--" + type;
-    }
-});
-
-linkifyHtml("github.com", {
-    className: {
-        url: "new-link--url",
-        email(href: string) {
-            return "new-link--email";
+    linkifyHtml("github.com", {
+        attributes: {
+            rel: "nofollow"
         }
-    }
-});
+    });
 
-/* events */
+    /* className */
 
-linkifyHtml("", {
-    events: {
-        click(e) {
-            alert("Link clicked!");
-        },
-        mouseover(e) {
-            alert("Link hovered!");
+    linkifyHtml("github.com", {
+        className: "new-link--url"
+    });
+
+    linkifyHtml("github.com", {
+        className(href, type) {
+            return "new-link--" + type;
         }
-    }
-});
+    });
 
-/* defaultProtocol */
-
-/* format */
-
-linkifyHtml("", {
-    format(value, type) {
-        if (type === "url" && value.length > 50) {
-            value = value.slice(0, 50) + "…";
+    linkifyHtml("github.com", {
+        className: {
+            url: "new-link--url",
+            email(href: string) {
+                return "new-link--email";
+            }
         }
-        return value;
-    }
-});
+    });
 
-linkifyHtml("", {
-    format: {
-        url(value) {
-            return value.length > 50 ? value.slice(0, 50) + "…" : value;
+    /* events */
+
+    linkifyHtml("", {
+        events: {
+            click(e) {
+                alert("Link clicked!");
+            },
+            mouseover(e) {
+                alert("Link hovered!");
+            }
         }
-    }
-});
+    });
 
-/* formatHref */
+    /* defaultProtocol */
 
-linkifyHtml("This site is #rad", {
-    formatHref(href, type) {
-        if (type === "hashtag") {
-            href = "https://twitter.com/hashtag/" + href.substring(1);
+    /* format */
+
+    linkifyHtml("", {
+        format(value, type) {
+            if (type === "url" && value.length > 50) {
+                value = value.slice(0, 50) + "…";
+            }
+            return value;
         }
-        return href;
-    }
-});
+    });
 
-linkifyHtml("Hey @dhh, check out issue #23", {
-    formatHref: {
-        mention(href) {
-            return "https://github.com" + href;
-        },
-        ticket(href) {
-            return (
-                "https://github.com/SoapBox/linkifyjs/issues/" +
-                href.substring(1)
-            );
+    linkifyHtml("", {
+        format: {
+            url(value) {
+                return value.length > 50 ? value.slice(0, 50) + "…" : value;
+            }
         }
-    }
-});
+    });
 
-/* ignoreTags */
+    /* formatHref */
 
-linkifyHtml(
-    // tslint:disable-next-line:prefer-template
-    'Please ignore <script>var a = {}; a.com = "Hi";</script> \n' +
-        "but do <span>b.ca</span>",
-    {
-        ignoreTags: ["script", "style"]
-    }
-);
-
-/* nl2br */
-
-/* tagName */
-
-linkifyHtml("github.com", {
-    tagName: "span"
-});
-
-linkifyHtml("#swag", {
-    tagName: {
-        hashtag: "span"
-    }
-});
-
-/* target */
-
-linkifyHtml("github.com", {
-    target: "_parent"
-});
-
-linkifyHtml("test-email@example.com", {
-    target: {
-        url: "_parent",
-        email: null
-    }
-});
-
-/* validate */
-
-// Don't linkify links that don't begin in a protocol
-// e.g., "http://google.com" will be linkified, but "google.com" will not.
-linkifyHtml("www.google.com", {
-    validate: {
-        url(value) {
-            return /^(http|ftp)s?:\/\//.test(value);
+    linkifyHtml("This site is #rad", {
+        formatHref(href, type) {
+            if (type === "hashtag") {
+                href = "https://twitter.com/hashtag/" + href.substring(1);
+            }
+            return href;
         }
-    }
+    });
+
+    linkifyHtml("Hey @dhh, check out issue #23", {
+        formatHref: {
+            mention(href) {
+                return "https://github.com" + href;
+            },
+            ticket(href) {
+                return (
+                    "https://github.com/SoapBox/linkifyjs/issues/" +
+                    href.substring(1)
+                );
+            }
+        }
+    });
+
+    /* ignoreTags */
+
+    linkifyHtml(
+        // tslint:disable-next-line:prefer-template
+        'Please ignore <script>var a = {}; a.com = "Hi";</script> \n' +
+            "but do <span>b.ca</span>",
+        {
+            ignoreTags: ["script", "style"]
+        }
+    );
+
+    /* nl2br */
+
+    /* tagName */
+
+    linkifyHtml("github.com", {
+        tagName: "span"
+    });
+
+    linkifyHtml("#swag", {
+        tagName: {
+            hashtag: "span"
+        }
+    });
+
+    /* target */
+
+    linkifyHtml("github.com", {
+        target: "_parent"
+    });
+
+    linkifyHtml("test-email@example.com", {
+        target: {
+            url: "_parent",
+            email: null
+        }
+    });
+
+    /* validate */
+
+    // Don't linkify links that don't begin in a protocol
+    // e.g., "http://google.com" will be linkified, but "google.com" will not.
+    linkifyHtml("www.google.com", {
+        validate: {
+            url(value) {
+                return /^(http|ftp)s?:\/\//.test(value);
+            }
+        }
+    });
+});
+
+describe("linkifyjs/react", () => {
+    it("should render a Linkify component", () => {
+        const rootElement = document.createElement("div");
+        ReactDOM.render(
+            React.createElement(Linkify, {
+                options: {
+                    className: "custom-class-name"
+                }
+            }),
+            rootElement
+        );
+    });
 });

types/linkifyjs/react.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { LinkifyOptions } from "./index";
+
+declare interface LinkifyProps {
+    options: LinkifyOptions;
+}
+
+declare class Linkify extends React.Component<LinkifyProps> {}
+
+export { LinkifyProps };
+
+export default Linkify;