diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4db66df..1d2706c 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -3,13 +3,17 @@ import ReactDOM from "react-dom"; import CopyMailTo from "../lib"; -const App = () => ( -
-

Copy email address to clipboard

- -
-); +const App = () => { + let email = "email@domain.com"; + let isSecure = false; + return ( +
+

Copy email address to clipboard

+ +
+ ) +}; ReactDOM.render(, document.getElementById("app")); diff --git a/src/lib/index.tsx b/src/lib/index.tsx index abb9161..c6e5660 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -3,6 +3,7 @@ import React, { MouseEvent } from "react"; type theme = "dark" | "light"; interface CopyMailToPropsInterface { email: string; + isSecure: boolean; theme: theme; children?: React.ReactNode; defaultTooltip?: string; @@ -66,6 +67,7 @@ const toolTipVisibleStyles: React.CSSProperties = { const CopyMailTo = ({ email, + isSecure, theme = "dark", children = null, defaultTooltip = "Copy email address", @@ -77,9 +79,13 @@ const CopyMailTo = ({ const [showCopied, setShowCopied] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); - const copyEmail = (e: MouseEvent) => { + const copyEmail = (e: MouseEvent, isSecure: Boolean) => { e.preventDefault(); - copyToClipboard(email); + if(isSecure){ + copyToClipboard(window.atob(email)); + } else { + copyToClipboard(email); + } setShowCopied(true); setShowTooltip(true); }; @@ -109,19 +115,23 @@ const CopyMailTo = ({ ...(showTooltip && toolTipVisibleStyles) }; + if(isSecure){ + email = window.btoa(email); + } + return ( copyEmail(e, isSecure)} onMouseOver={toggleTooltip} onMouseOut={toggleTooltip} onFocus={toggleTooltip} onBlur={toggleTooltip} - href={`mailto:${email}`} + href={isSecure ? "mailto:" + window.atob(email) : "mailto:" + email} style={anchorStyles} > - {children || email} + {children || isSecure ? window.atob(email) : email} {showCopied ? copiedTooltip : defaultTooltip}