From 5ea25fadcf164dadb02edadbaba9ea8642057312 Mon Sep 17 00:00:00 2001 From: kala2 Date: Thu, 1 Oct 2020 13:04:24 +0300 Subject: [PATCH] feat: add tooltip position appear below fix: add type string literal for tooltipPosition Update Readme Revert to previous Readme Update Readme from master --- README.md | 34 +++++++++++++++++++++++++++++----- src/demo/index.tsx | 2 +- src/lib/index.tsx | 20 ++++++++++++-------- 3 files changed, 42 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 3aa8453..0dca438 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,14 @@ ## react-copy-mailto + +[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-) + [![npm version](https://badge.fury.io/js/react-copy-mailto.svg)](https://badge.fury.io/js/react-copy-mailto) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-copy-mailto) A fully customizable React component for copying email from `mailto` links. ## Motivation -The one thing we all can agree on that we hate it when the default mail app pops up after clicking on the `mailto` links. Most of the time we just want to copy the email address and that's where this module comes into play. +The one thing we all can agree on that we hate it when the default mail app pops up after clicking on the `mailto` links. Most of the time we just want to copy the email address and that's where this module comes into play. Big shout out to [Kuldar](https://twitter.com/kkuldar) whose tweet [thread](https://twitter.com/kkuldar/status/1270736717939716097) inspired us to build this. ## Demo @@ -46,13 +49,14 @@ You can customize almost every aspect of this component using the below props, o | Name | Type | Default | Description | |:-: |--- |--- |--- | -| email | string | none | The email to be copied | +| email | string | none | The email to be copied. | | children | ReactNode | null | Use this if you want to use some custom component inside the anchor tag. | | defaultTooltip | string | "Copy email address" | Text shown in the tooltip when the user hovers over the link. | | copiedTooltip | string | "Copied to clipboard!" | Text shown in the tooltip when the user clicks on the link and the text is copied to clipboard. | -| containerStyles | style object | none | The styles to be applied to the container | -| tooltipStyles | style object | none | The styles to be applied to the tooltip | -| anchorStyles | style object | none | The styles to be applied to the anchor | +| containerStyles | style object | none | The styles to be applied to the container. | +| tooltipStyles | style object | none | The styles to be applied to the tooltip. | +| anchorStyles | style object | none | The styles to be applied to the anchor. | +| tooltipPosition | string | "above" | The position of the tooltip. | ## Development @@ -78,3 +82,23 @@ Feel free to open [issues](https://github.com/devfolioco/react-copy-mailto/issue [![NPM](https://img.shields.io/npm/l/react-copy-mailto)](https://github.com/devfolioco/react-copy-mailto/blob/master/LICENSE) + +## Contributors ✨ + +Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): + + + + + + + + + +

Prateek Surana
💻 🎨 🖋 📖
Ankit Raj
🔧
+ + + + + +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4db66df..4aa5a1d 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -8,7 +8,7 @@ const App = () => ( style={{ display: "flex", alignItems: "center", flexDirection: "column" }} >

Copy email address to clipboard

- + ); diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 5313063..f21c416 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -1,5 +1,7 @@ import React, { MouseEvent } from "react"; +type TooltipPosition = "above" | "below"; + const copyToClipboard = (str: string) => { const el = document.createElement("textarea"); // Create a