Nanoprogrammed Penultimate Musicianship

    react-obfuscate

    1.3.2 • Public • Published

    react-obfuscate

    Greenkeeper badge Travis npm version npm code style: prettier

    react-obfuscate

    Demo & Examples

    Live demo: coston.io/react-obfuscate

    How it works

    The user passes the contact link as an email, tel, sms, or facetime prop. The component obfuscates href data until an onClick event. Links are given their proper URL schemes (mailto, facetime, etc.) The link is rendered in reverse in the dom, but reversed again with css. This making the link useless for spammers, but user friendly on screen.

    Why

    The world needs obfuscated links that display the link in a friendly way.

    Installation

    npm install --save react-obfuscate

    Input

    import React from 'react'
    import Obfuscate from 'react-obfuscate'
     
    export default () => (
      <p>
        Phone: <Obfuscate tel='205-454-1234' /><br />
        Email: <Obfuscate
          email='hello@coston.cool'
          headers={
            {subject:'Question from the website', cc:'friend@coston.cool'}
          }/>
      </p>
    )

    Output

    Robot Interaction

    <p>
      Phone: <a href="obfuscated" style="direction: rtl; unicode-bidi: bidi-override;">4321-454-502</a><br>
      Email: <a href="obfuscated" style="direction: rtl; unicode-bidi: bidi-override;">looc.notsoc@olleh</a>
    </p>

    Human Interaction

    <p>
      Phone: <a href="tel:205-454-1234">205-454-1234</a><br>
      Email: <a href="mailto:hello@coston.cool&subject=Question%20from%20the%20website&cc=friend@coston.cool">hello@coston.cool</a>
    </p>

    Options

    Prop Type Argument Default Description
    email string <optional> null email address of the intended recipient
    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
    headers object <optional> null subject, cc, bcc, body, etc
    obfuscate boolean <optional> true set to false to disable obfuscation

    Development

    npm run build

    Contributors

    react-obfuscate is awesome thanks to these community members:

    Contributing

    Please help make this react component better. Submit any issue and/or make a pull request!

    To Do

    • Write some good tests
    • Convert clipboard text left to right

    License

    Licensed under the MIT license.

    Keywords

    none

    Install

    npm i [email protected]

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar