Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Gatsby remark plugin to add tel: or mailto: for anchors href.

The problem

Lot of times we want to add tel: or mailto: for anchor tags like <a href="tel:9876543210">9876543210</a> or for mail id <a href="mailto:test@gmail.com">test@gmail.com</a>.

The solution

gatsby-remark-phoneno-emailid-link plugin gives us that flexibility to modify anchor tags which has mail id or phone number.



Converts to

<a href="tel:9876543210">9876543210</a>
<a href="tel:test@gmail.com">test@gmail.com</a>
<a href="9876543210">9876543210</a>


npm i gatsby-remark-phoneno-emailid-link


This library has a required peerDependencies listing for gatsby and should be used as a plugin for gatsby-transformer-remark

// In your gatsby-config.js

module.exports = {
  plugins: [
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
            resolve: `gatsby-remark-phoneno-emailid-link`,
            options: {


  • phoneNumberRegexp - Accepts custom regexp for phone number validation.
  • emailIdRegexp - Accepts custom regexp for email id validation.
  • noTransformFlag - Accepts flag for no transform.



© 2023 Gatsby, Inc.