Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-copy-mailto with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactCopyMailto = require("react-copy-mailto")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-copy-mailto v1.1.1

A fully customizable React component for copying email from mailto links

react-copy-mailto

npm version npm bundle size

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.

Demo

here

Installation and Usage

The easiest way to use this library is to install it via yarn or npm

yarn add react-copy-mailto

or

npm install react-copy-mailto

Then just use it in your app:

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

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

Props

You can customize almost every aspect of this component using the below props, out of which email is the only required prop.

NameTypeDefaultDescription
emailstringnoneThe email to be copied
childrenReactNodenullUse this if you want to use some custom component inside the anchor tag.
defaultTooltipstring"Copy email address"Text shown in the tooltip when the user hovers over the link.
copiedTooltipstring"Copied to clipboard!"Text shown in the tooltip when the user clicks on the link and the text is copied to clipboard.
containerStylesstyle objectnoneThe styles to be applied to the container
tooltipStylesstyle objectnoneThe styles to be applied to the tooltip
anchorStylesstyle objectnoneThe styles to be applied to the anchor

Development

  • Install the dependencies
yarn
  • Run the example on the development server
yarn demo:dev

Contributing

GitHub issues GitHub pull requests

Feel free to open issues and pull requests!

License

NPM

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free