diff --git a/src/index.test.tsx b/src/index.test.tsx
index d519fa4..43391f3 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -150,6 +150,18 @@ test("LinkItUrl", () => {
);
});
+test("LinkItUrl to have className", () => {
+ render(
+
+ www.google.comhi
+
+ );
+ expect(screen.getByRole("link", { name: "www.google.com" })).toHaveAttribute(
+ "class",
+ "hello"
+ );
+});
+
test("LinkItJira", () => {
render(
diff --git a/src/index.tsx b/src/index.tsx
index 40a7243..f907366 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,10 @@
import React, { Fragment, isValidElement, cloneElement } from "react";
import type { ReactNode } from "react";
-import type { Component } from "./types";
+import type {
+ Component,
+ HOCLinkProps,
+ JiraHOCLinkProps
+} from "./types";
import { UrlComponent, urlRegex } from "./url";
import { TwitterComponent, twitterRegex } from "./twitter";
import { JiraComponent, jiraRegex } from "./jira";
@@ -82,8 +86,11 @@ function findText(
* urls
* @example
* ```
- *
- * Hello http://world.com
+ * {match}}
+ * regex={regexToMatch}
+ * >
+ * www.google.comhi match_me
*
* ```
*/
@@ -98,13 +105,16 @@ export const LinkIt: React.FC<{
);
};
-export const LinkItUrl: React.FC = (props) => {
+/**
+ * Link URLs
+ */
+export const LinkItUrl: React.FC = (props) => {
return (
{findText(
props.children,
(match, key) => (
-
+
),
urlRegex
)}
@@ -112,13 +122,16 @@ export const LinkItUrl: React.FC = (props) => {
);
};
-export const LinkItTwitter: React.FC = (props) => {
+/**
+ * Link Twitter handles
+ */
+export const LinkItTwitter: React.FC = (props) => {
return (
{findText(
props.children,
(match, key) => (
-
+
),
twitterRegex
)}
@@ -126,13 +139,16 @@ export const LinkItTwitter: React.FC = (props) => {
);
};
-export const LinkItJira: React.FC<{ domain: string }> = (props) => {
+/**
+ * Link Jira tickets
+ */
+export const LinkItJira: React.FC = (props) => {
return (
{findText(
props.children,
(match, key) => (
-
+
),
jiraRegex
)}
@@ -140,13 +156,16 @@ export const LinkItJira: React.FC<{ domain: string }> = (props) => {
);
};
-export const LinkItEmail: React.FC = (props) => {
+/**
+ * Link Emails
+ */
+export const LinkItEmail: React.FC = (props) => {
return (
{findText(
props.children,
(match, key) => (
-
+
),
emailRegex
)}
@@ -158,3 +177,4 @@ export * from "./url";
export * from "./twitter";
export * from "./jira";
export * from "./email";
+export * from "./types";
diff --git a/src/jira.tsx b/src/jira.tsx
index 1deacaf..91187a9 100644
--- a/src/jira.tsx
+++ b/src/jira.tsx
@@ -1,9 +1,5 @@
import React from "react";
-import type { LinkProps } from "types";
-
-interface JiraLinkProps extends LinkProps {
- domain: string;
-}
+import type { JiraLinkProps } from "types";
export const jiraRegex = /[A-Z]+-\d+/i;
diff --git a/src/types.ts b/src/types.ts
index 6a6fb94..a4dff59 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,7 +1,28 @@
export interface LinkProps {
+ /** String that matched the regex */
match: string;
+ /** Key to be used when looping matches */
key: number;
+ /** Optional class which is passed to the linked component */
className?: string;
}
+export interface HOCLinkProps {
+ /** Optional class which is passed to the linked component */
+ className?: string;
+}
+
+export interface JiraLinkProps extends LinkProps {
+ /** Jira base url */
+ domain: string;
+}
+
+export interface JiraHOCLinkProps extends HOCLinkProps {
+ /** Jira base url */
+ domain: string;
+}
+
+/**
+ * Function receives matched string and key to be used for loop, must return a React component
+ */
export type Component = (match: string, key: number) => JSX.Element;