Merge pull request #38 from coston/obfuscate-href-prop-#37

Add href prop #37

dist/obfuscate.js

@@ -76,6 +76,8 @@ function (_Component) {
         link = "sms:".concat(props.sms);
       } else if (props.facetime) {
         link = "facetime:".concat(props.facetime);
+      } else if (props.href) {
+        link = props.href;
       } else if (_typeof(props.children) !== 'object') {
         link = props.children;
       } else {
@@ -124,13 +126,14 @@ function (_Component) {
           sms = _this$props.sms,
           facetime = _this$props.facetime,
           email = _this$props.email,
+          href = _this$props.href,
           headers = _this$props.headers,
           obfuscate = _this$props.obfuscate,
           linkText = _this$props.linkText,
           style = _this$props.style,
-          others = _objectWithoutProperties(_this$props, ["element", "children", "tel", "sms", "facetime", "email", "headers", "obfuscate", "linkText", "style"]);
+          others = _objectWithoutProperties(_this$props, ["element", "children", "tel", "sms", "facetime", "email", "href", "headers", "obfuscate", "linkText", "style"]);
 
-      var propsList = children || tel || sms || facetime || email;
+      var propsList = children || tel || sms || facetime || email || href;
 
       var obsStyle = _objectSpread({}, style || {}, {
         unicodeBidi: 'bidi-override',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-obfuscate",
-  "version": "3.3.1",
+  "version": "3.4.0-0",
   "description": "An intelligent React component to obfuscate any contact link",
   "main": "dist/obfuscate.js",
   "files": [

pages/index.js

@@ -157,6 +157,9 @@ const headerCode = `
     <br />
     ➡️ Facetime: 
     <Obfuscate facetime="202.224.5744" />
+     <br />
+    ➡️ Any other URL: 
+    <Obfuscate href="https://wa.me/15551234567">Chat On WhatsApp</Obfuscate>
     <div>
       ➡️ Child Elements: 
       <Obfuscate email="coston.perkins@ua.edu">

readme.md

@@ -78,9 +78,10 @@ export default () => (
 | tel       | `string`    | `<optional>` | `null`       | telephone number of the intended recipient                     |
 | sms       | `string`    | `<optional>` | `null`       | sms number of the intended recipient                           |
 | facetime  | `string`    | `<optional>` | `null`       | facetime address of the intended recipient                     |
+| href      | `string`    | `<optional>` | `null`       | Obfuscate any other URL type                                   |
 | headers   | `object`    | `<optional>` | `null`       | subject, cc, bcc, body, etc                                    |
 | obfuscate | `boolean`   | `<optional>` | `true`       | set to false to disable obfuscation                            |
-| linkText  | `string`    | `<optional>` | `obfuscated` | add custom pre-interaction href attribute placeholder text               |
+| linkText  | `string`    | `<optional>` | `obfuscated` | add custom pre-interaction href attribute placeholder text     |
 | element   | `string`    | `<optional>` | `'a'`        | custom element to render instead of an `a` tag                 |
 | onClick   | `function`  | `<optional>` | `null`       | called prior to setting location (e.g. for analytics tracking) |
 

src/obfuscate.js

@@ -32,6 +32,8 @@ export default class Obfuscate extends Component {
       link = `sms:${props.sms}`
     } else if (props.facetime) {
       link = `facetime:${props.facetime}`
+    } else if (props.href) {
+      link = props.href
     } else if (typeof props.children !== 'object') {
       link = props.children
     } else {
@@ -81,14 +83,15 @@ export default class Obfuscate extends Component {
       sms,
       facetime,
       email,
+      href,
       headers,
       obfuscate,
       linkText,
       style,
       ...others
     } = this.props
 
-    const propsList = children || tel || sms || facetime || email
+    const propsList = children || tel || sms || facetime || email || href
 
     const obsStyle = {
       ...(style || {}),

test/obfuscate.test.js

@@ -15,15 +15,15 @@ describe('obfuscate', () => {
     }
   })
 
-  test('renders an ofuscated href', () => {
+  test('renders an obfuscated href', () => {
     const wrapper = shallow(
       <Obfuscate tel={testTel} />
     )
 
     expect(wrapper.prop('href')).toEqual('obfuscated')
   })
 
-  test('properly sets location.href when ofuscated email is clicked', () => {
+  test('properly sets location.href when obfuscated email is clicked', () => {
     const wrapper = shallow(
       <Obfuscate email={testEmail} />
     )
@@ -32,7 +32,7 @@ describe('obfuscate', () => {
     expect(global.window.location.href).toEqual(`mailto:${testEmail}`)
   })
 
-  test('properly sets location.href when ofuscated email with headers is clicked', () => {
+  test('properly sets location.href when obfuscated email with headers is clicked', () => {
     const headers = {
       cc: 'dade@zero-cool.af',
       bcc: 'smith@machina.net',
@@ -49,7 +49,7 @@ describe('obfuscate', () => {
       .join('&')}`)
   })
 
-  test('properly sets location.href when ofuscated tel is clicked', () => {
+  test('properly sets location.href when obfuscated tel is clicked', () => {
     const wrapper = shallow(
       <Obfuscate tel={testTel} />
     )
@@ -58,7 +58,17 @@ describe('obfuscate', () => {
     expect(global.window.location.href).toEqual(`tel:${testTel}`)
   })
 
-  test('properly sets location.href when ofuscated sms is clicked', () => {
+   test('properly sets location.href when obfuscated href is clicked', () => {
+    const wrapper = shallow(
+      <Obfuscate href={testTel} />
+    )
+
+    wrapper.simulate('click', { preventDefault: () => {} })
+    expect(global.window.location.href).toEqual(testTel)
+  })
+
+
+  test('properly sets location.href when obfuscated sms is clicked', () => {
     const wrapper = shallow(
       <Obfuscate sms={testTel} />
     )
@@ -67,7 +77,7 @@ describe('obfuscate', () => {
     expect(global.window.location.href).toEqual(`sms:${testTel}`)
   })
 
-  test('properly sets location.href when ofuscated facetime is clicked', () => {
+  test('properly sets location.href when obfuscated facetime is clicked', () => {
     const wrapper = shallow(
       <Obfuscate facetime={testTel} />
     )
@@ -76,7 +86,7 @@ describe('obfuscate', () => {
     expect(global.window.location.href).toEqual(`facetime:${testTel}`)
   })
 
-  test('properly sets location.href when ofuscated without type is clicked', () => {
+  test('properly sets location.href when obfuscated without type is clicked', () => {
     const wrapper = shallow(
       <Obfuscate>test</Obfuscate>
     )
@@ -85,7 +95,7 @@ describe('obfuscate', () => {
     expect(global.window.location.href).toEqual('test')
   })
 
-  test('renders an unofuscated href when obfuscate prop equals false', () => {
+  test('renders an unobfuscated href when obfuscate prop equals false', () => {
     const wrapper = shallow(
       <Obfuscate obfuscate={false} sms={testTel} />
     )
@@ -94,7 +104,7 @@ describe('obfuscate', () => {
     expect(wrapper.prop('href')).toEqual(`sms:${testTel}`)
   })
 
-  test('renders an unofuscated child element left to right when obfuscate prop equals false', () => {
+  test('renders an unobfuscated child element left to right when obfuscate prop equals false', () => {
     const wrapper = shallow(
       <Obfuscate obfuscate={false} facetime={testTel} />
     )
@@ -103,7 +113,7 @@ describe('obfuscate', () => {
     expect(wrapper.prop('href')).toEqual(`facetime:${testTel}`)
   })
 
-  test('renders an unofuscated child element right to left when obfuscated', () => {
+  test('renders an unobfuscated child element right to left when obfuscated', () => {
     const wrapper = shallow(
       <Obfuscate obfuscate={true} tel={testTel} />
     )