Merge pull request #34450 from jackywangKaggle/react-linkify

Add react-linkify module to DefinitelyTyped

types/react-linkify/index.d.ts

@@ -0,0 +1,65 @@
+// Type definitions for react-linkify 0.2
+// Project: http://tasti.github.io/react-linkify/
+// Definitions by: Michael James <https://github.com/majames>
+//                 Jacky Wang <https://github.com/jackywang529>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.4
+
+import * as React from "react";
+
+declare namespace ReactLinkify {
+    /**
+     * Matching information
+     */
+    interface MatchInfo {
+        /**
+         * Link schema, can be empty for fuzzy links, or for protocol-neutral links
+         */
+        schema: string;
+        /**
+         * Offset of matched text
+         */
+        index: number;
+        /**
+         * Index of next char after the end of the matched text
+         */
+        lastIndex: number;
+        /**
+         * Normalized text
+         */
+        text: string;
+        /**
+         * Link, generated from matched text
+         */
+        url: string;
+    }
+
+    interface Props {
+        children: React.ReactNode;
+        /**
+         * Custom anchor tag creator
+         * Default to using exisint <a> tag with the provided href={decoratedHref}, key={key}
+         * and children={decoratedText}, without additional styling
+         */
+        componentDecorator?: (decoratedHref: string, decoratedText: string, key: number) => React.ReactNode;
+        /**
+         * Custom href decorator or mapper on the matched (url) href
+         * Default to no transformation
+         */
+        hrefDecorator?: (urlHref: string) => string;
+        /**
+         * Custom matcher for (url), that returns each match with the matching information
+         * Default to https://github.com/markdown-it/linkify-it's LinkifyIt().tlds(tlds).match
+         */
+        matchDecorator?: (text: string) => MatchInfo[] | null;
+        /**
+         * Custom text decorator or mapper on the matched (url) text
+         * Default to no transformation
+         */
+        textDecorator?: (urlText: string) => string;
+    }
+
+    class ReactLinkify extends React.Component<Props> {}
+}
+
+export default ReactLinkify.ReactLinkify;

types/react-linkify/react-linkify-tests.tsx

@@ -0,0 +1,39 @@
+import LinkifyIt = require("linkify-it");
+import * as React from "react";
+import ReactLinkify from 'react-linkify';
+
+const linkifier = new LinkifyIt();
+
+class ExampleOfUsingReactLinkify extends React.Component {
+	render() {
+		return (
+			<ReactLinkify
+				textDecorator={textDecorator}
+				hrefDecorator={hrefDecorator}
+				componentDecorator={componentDecorator}
+				matchDecorator={matchDecorator}>
+				This is a great website: www.wikipedia.org!
+			</ReactLinkify>
+		);
+	}
+}
+
+function textDecorator(urlText: string): string {
+    return urlText + "is a great url";
+}
+
+function hrefDecorator(urlHref: string): string {
+	return urlHref;
+}
+
+function componentDecorator(decoratedHref: string, decoratedText: string, key: number): React.ReactNode {
+	return (
+		<a href={decoratedHref} key={key}>
+			{decoratedText}
+		</a>
+	);
+}
+
+function matchDecorator(text: string) {
+	return linkifier.match(text);
+}

types/react-linkify/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "jsx": "react",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-linkify-tests.tsx"
+    ]
+}

types/react-linkify/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "dtslint/dt.json"
+}