gatsby-remark-phoneno-emailid-link

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:[email protected]">[email protected]</a>.

The solution

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

Example

[9876543210](9876543210)
[[email protected]]([email protected])
[noTransform:9876543210](9876543210)

Converts to

<a href="tel:9876543210">9876543210</a>
<a href="tel:[email protected]">[email protected]</a>
<a href="9876543210">9876543210</a>

Installation

npm i gatsby-remark-phoneno-emailid-link

Setup

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: {
              ...
            }
          }
        ],
      },
    }
  ]
}

Options

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

License

MIT