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}