From a47b485534c97f37f2592d8fb7aca64d5e00de4b Mon Sep 17 00:00:00 2001 From: helloShantanu <1by18cs147@bmsit.in> Date: Fri, 2 Oct 2020 10:24:33 +0530 Subject: [PATCH 1/2] UI for Demo Page Refactor --- src/demo/index.html | 3 +- src/demo/index.tsx | 133 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 130 insertions(+), 6 deletions(-) diff --git a/src/demo/index.html b/src/demo/index.html index 2fa8e01..2a21c34 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -4,9 +4,10 @@ + react-copy-mailto - +
diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4db66df..1e83daf 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -4,11 +4,134 @@ import ReactDOM from "react-dom"; import CopyMailTo from "../lib"; const App = () => ( -
-

Copy email address to clipboard

- +
+
+
+

REACT-COPY-MAILTO

+
+
+

+ Copy Email Address to Clipboard +

+

Please hover over Element and Click to copy

+ +
+
+
+

How to Install & Use

+
+
+

+ Install using npm or yarn +

+
+ +
+

+ npm install react-copy-mailto
+
OR
+
+ yarn add react-copy-mailto +

+
+
+

+ Using in your App +

+
+ +
+

+ import React from "react";

+ import CopyMailTo from "react-copy-mailto";

+ const YourComponent = () + => (
+ <div>
+ <CopyMailTo> email="email@domain.com" />
+ </div>
+ ); +

+
+
+

+ For More Details and Customization +

+
+ + +
+
); From e85b832ca9afe2fe5684fdc1acb5858f326343a7 Mon Sep 17 00:00:00 2001 From: helloShantanu <1by18cs147@bmsit.in> Date: Sun, 4 Oct 2020 07:36:03 +0530 Subject: [PATCH 2/2] fixed the tooltip shrink issue --- src/lib/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 5313063..8e9dffa 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -28,6 +28,7 @@ const containerBaseStyles: React.CSSProperties = { const tooltipBaseStyles: React.CSSProperties = { bottom: "26px", maxWidth: "fit-content", + minWidth: "115px", position: "absolute", width: "auto", margin: "auto",