{"id":24568802,"url":"https://github.com/coston/react-obfuscate","last_synced_at":"2025-04-05T15:09:43.215Z","repository":{"id":22644432,"uuid":"96924303","full_name":"coston/react-obfuscate","owner":"coston","description":"An intelligent React component to obfuscate any contact link!","archived":false,"fork":false,"pushed_at":"2024-08-24T16:40:22.000Z","size":4634,"stargazers_count":118,"open_issues_count":0,"forks_count":17,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T14:12:27.764Z","etag":null,"topics":["email","infosec","obfuscation","react"],"latest_commit_sha":null,"homepage":"https://react-obfuscate.coston.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coston.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-11T18:29:32.000Z","updated_at":"2025-03-27T10:08:50.000Z","dependencies_parsed_at":"2023-10-23T09:39:27.498Z","dependency_job_id":"235407e5-b61e-44bb-b92e-1359df0c4e79","html_url":"https://github.com/coston/react-obfuscate","commit_stats":{"total_commits":508,"total_committers":15,"mean_commits":33.86666666666667,"dds":0.6496062992125984,"last_synced_commit":"17e9f9cadf419c13b76bce6e4601e8266cdfa78e"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coston%2Freact-obfuscate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coston%2Freact-obfuscate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coston%2Freact-obfuscate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coston%2Freact-obfuscate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coston","download_url":"https://codeload.github.com/coston/react-obfuscate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353749,"owners_count":20925329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["email","infosec","obfuscation","react"],"created_at":"2025-01-23T14:55:26.900Z","updated_at":"2025-04-05T15:09:43.182Z","avatar_url":"https://github.com/coston.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-obfuscate\n\n[![Coverage Status](https://coveralls.io/repos/github/coston/react-obfuscate/badge.svg?branch=master)](https://coveralls.io/github/coston/react-obfuscate?branch=master)\n![GitHub last commit](https://img.shields.io/github/last-commit/coston/react-obfuscate)\n[![npm version](https://badge.fury.io/js/react-obfuscate.svg)](https://www.npmjs.com/package/react-obfuscate)\n[![npm](https://img.shields.io/npm/dm/react-obfuscate.svg)](https://www.npmjs.com/package/react-obfuscate)\n \n![react-obfuscate](https://user-images.githubusercontent.com/7424180/28096225-c2f07142-666c-11e7-96ab-c12f34d1b86f.png)\n\n## Demo \u0026 Examples\n\nLive demo: [react-obfuscate.coston.io](https://react-obfuscate.coston.io)\n\n## How it works\n\nThe user passes the contact link as an `email`, `tel`, `sms`, `facetime`, or `href` prop. The component obfuscates href data until a hover, click, or focus 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.\n\n## Why\n\nThe world needs obfuscated links that display the link in a friendly way.\n\n## Installation\n\n```bash\nnpm install --save react-obfuscate\n```\n\n### Input\n\n```js\nimport React from 'react';\nimport Obfuscate from 'react-obfuscate';\n\nexport default () =\u003e (\n  \u003cp\u003e\n    Phone: \u003cObfuscate tel=\"205-454-1234\" /\u003e\n    \u003cbr /\u003e\n    Email:{' '}\n    \u003cObfuscate\n      email=\"hello@coston.io\"\n      headers={{\n        cc: 'dade@zero-cool.af',\n        bcc: 'smith@machina.net',\n        subject: 'react-obfuscate',\n        body: 'Down with the machines!',\n      }}\n    /\u003e\n  \u003c/p\u003e\n);\n```\n\n### Output\n\n#### Robot Interaction\n\n```html\n\u003cp\u003e\n  Phone:\n  \u003ca href=\"obfuscated\" style=\"direction: rtl; unicode-bidi: bidi-override;\"\n    \u003e4321-454-502\u003c/a\n  \u003e\u003cbr /\u003e\n  Email:\n  \u003ca href=\"obfuscated\" style=\"direction: rtl; unicode-bidi: bidi-override;\"\n    \u003eoi.notsoc@olleh\u003c/a\n  \u003e\n\u003c/p\u003e\n```\n\n#### Human Interaction\n\n```js\n\u003cp\u003e\n  Phone: \u003ca href=\"tel:205-454-1234\"\u003e205-454-1234\u003c/a\u003e\u003cbr\u003e\n  Email: \u003ca href=\"mailto:hello@coston.io?cc=kate%40acidburn.af\u0026amp;bcc=tanderson%40metacortex.net\u0026amp;subject=react-obfuscate\u0026amp;body=Down%20with%20the%20machines!\"\u003ehello@coston.io\u003c/a\u003e\n\u003c/p\u003e\n```\n\n## Common Options\n\n| Prop       | Type     | Default | Description                                  |\n| ---------- | -------- | ------- | -------------------------------------------- |\n| `email`    | `string` | `null`  | email address of the intended recipient      |\n| `headers`  | `object` | `null`  | subject, cc, bcc, body, etc                  |\n| `tel`      | `string` | `null`  | telephone number of the intended recipient   |\n| `sms`      | `string` | `null`  | sms number of the intended recipient         |\n| `facetime` | `string` | `null`  | facetime address of the intended recipient   |\n| `href`     | `string` | `null`  | Obfuscate any other URL type (e.g. WhatsApp) |\n\n## Uncommon Options\n\n| Prop                | Type       | Default        | Description                                                    |\n| ------------------- | ---------- | -------------- | -------------------------------------------------------------- |\n| `linkText`          | `string`   | `'obfuscated'` | add custom pre-interaction href attribute placeholder text     |\n| `obfuscate`         | `boolean`  | `true`         | set to false to disable obfuscation                            |\n| `obfuscateChildren` | `boolean`  | `true`         | set to false to disable obfuscation of children                |\n| `element`           | `string`   | `'a'`          | use if you want to override the default `a` tag                |\n| `onClick`           | `function` | `null`         | called prior to setting location (e.g. for analytics tracking) |\n\n## Development\n\n```bash\nnpm start\n```\n\n## Consecutive Obfuscate/inline elements\n\nreact-obfuscate is an inline element. Using consecutive inline elements inside a block element causes an issue with the `bidi-override` reversal on Chrome. To prevent this,\nadd any text between the elements, wrap `\u003cObfuscate/\u003e` with another element (like `\u003cspan\u003e`), or add `style={{display:'inline-block'}}` to prevent any issues.\n\nExample Case:\n\n```js\n\u003caddress\u003e\n  \u003cObfuscate style={{ display: 'inline-block' }} email=\"-mail@mailbox.org\" /\u003e\n  \u003cbr /\u003e\n  \u003cObfuscate style={{ display: 'inline-block' }} tel=\"+69 111 222 333\" /\u003e\n\u003c/address\u003e\n```\n\n## Obfuscating custom elements with the `element` prop\n\nWith the `element` prop, users can obfuscate any element, like paragraphs or headers. Changing the dom element also removes the href and onClick props. Custom styling is required due to handling of right-to-left direction styles. Usually, adding `style={{textAlign:'left'}}` will suffice.\n\nExample Case:\n\n```js\n\u003cObfuscate element=\"p\" style={{ textAlign: 'left' }}\u003e\n  This paragraph is more secret than others.\n\u003c/Obfuscate\u003e\n```\n\n## Children\n\nBy default, objects **are not** reversed in the dom, but other types are. The `obfuscateChildren` prop set will disabled this functionality when set to `false`. If the child is an object, like html elements are, it will be rendered normally.\n\n##### Example Use Case\n\n```js\n\u003cObfuscate email=\"hello@coston.io\" aria-label=\"Email Me\"\u003e\n  \u003csvg width={24} height={21}\u003e\n    \u003cpath\n      fill=\"#000\"\n      d=\"M12 12.713L.0 3h23.97L12 12.713zm0 2.574L0 5.562V21h24V5\"\n    /\u003e\n  \u003c/svg\u003e\n\u003c/Obfuscate\u003e\n```\n\n## Contributors\n\nreact-obfuscate is awesome thanks to these community members:\n\n- [coston](https://github.com/coston)\n- [bostrom](https://github.com/bostrom)\n- [timmygee](https://github.com/timmygee)\n- [mic](https://github.com/mic)\n- [ravinggenius](https://github.com/ravinggenius)\n- [charlesbdudley](https://github.com/charlesbdudley)\n- [dalbitresb12](https://github.com/dalbitresb12)\n\n## Contributing\n\nPlease help make this react component better. Feel free to submit an issue, or contribute through a pull request.\n\n## License\n\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoston%2Freact-obfuscate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoston%2Freact-obfuscate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoston%2Freact-obfuscate/lists"}