Email addresses containing dashes are still reversed for me similar to #30

This bug appears for me on recent versions of both Chrome and Firefox.

Things I've tried:

• Per the readme I tried adding a span around the Obfuscate element
• Also per the readme I tried setting style={{display:'inline-block'}} on the element
• I tested the element with style={{ unicodeBidi: 'isolate-overide'}} which was mentioned in #29
• And I also tested the element with style={{ display:'inline-block', unicodeBidi: 'bidi-overide'}}

For context, I'm using the Obfuscate element within an html table. It's the only element within the table cell, and I am not using consecutive inline elements inside a block element.

Oddly enough, each reversed email (the ones containing dashes) also appears visually with a line break before/after the breakpoint.

It would be useful to override the rendered component to allow using (for instance) a <span />. Something like:

<Obfuscate component="span" skipHref>whatever</Obfuscate>

could render as:

<span style="unicode-bidi: isolate-override; direction: rtl;">revetahw</span>

<Obfuscate tel="(347) 855 6622" />

renders as

)347( 855 6622

is this expected behavior?

Suggested feature:

Sometimes, I turn a person's name into a link to their email. It would be nice to have a property to not obfuscate the children.

   <Obfuscate email={staff.email} obfuscateChildren={false}>{staff.name}</Obfuscate>

Hi @coston, thank you for putting out this component! I was wondering if you've considered adding an option to specify the render component to be a custom component?

In my particular case, I already have a custom styled Link component that I rather that this is uses, and I imagine might be the case for others as well.

Describe the bug
onClick (props.onClick) is called only if this.state.humanInteraction === false. If the cursor has entered the link area, this.state.humanInteraction === true, so the passed onClick prop function is not called.
See handleCopiability and handleClick methods (code below).
Happy to make a PR if you agree this is an issue.
Otherwise, what am I missing?

To Reproduce

• Give instance of <Obfuscate /> a custom onClick method eg
  <Obfuscate onClick={() => console.log('test'} />
• Click it
• <Obfuscate /> will descramble the link, but the onClick method does not get called.

Expected behavior
When user clicks, the onClick prop will be called before the deobfuscation method(s), as implied in docs.

Relevant lines

  handleClick(event) {
    const { onClick } = this.props

    // If focused or hovered, this js will be skipped with preference for html
    if (this.state.humanInteraction === false) { // <--- 1. THIS IS NOT SATISFIED AFTER USER HOVER 
      event.preventDefault()

      // Allow instantiator to provide an onClick method to be called
      // before we change location (e.g. for analytics tracking)
      if (onClick && typeof onClick === 'function') {
        onClick()                                                  // <--- 2. SO THIS IS NOT CALLED 
      }

      window.location.href = this.createContactLink(this.props)
    }
  }

Hiya,

Screaming Frog and Google Search Console are picking up on ghost pages generated by ROE. Any ideas why or how to fix it?

Hi,

when I upgraded your package to the latest version, I suddenly started seeing a visual issue with an email address that contains a dash.

I'm not 100% sure but it looks like the cause is the display: inline-block you introduced with "Use bidi-overide > isolate-overide for browser compatibility" (8e75c4a). If I remove that, the email address looks fine again.

Describe the bug
I'm using this package with GatsbyJS, it works fine in the local build or develop, however on deploying to Netlify I get the following error:

Can't resolve 'react' in '/opt/build/repo/node_modules/react-obfuscate/dist'
6:43:45 PM: File: ../node_modules/react-obfuscate/dist/obfuscate.js

Additional context
I'm getting the following as advice from VSCode:
module "..../node_modules/react-obfuscate/dist/obfuscate"
Could not find a declaration file for module 'react-obfuscate'. '..../node_modules/react-obfuscate/dist/obfuscate.js' implicitly has an 'any' type.
Try npm install @types/react-obfuscate if it exists or add a new declaration (.d.ts) file containing declare module 'react-obfuscate';ts(7016)

On initial install into a simple project, I receive a full-page critical error within this package. This should be a simple fix of removing this package's dependency on prop-types.

./~/react-obfuscate/dist/obfuscate.js
Module not found: Error: Cannot resolve module 'prop-types' in /Users/Dawson/code/personal/www/node_modules/react-obfuscate/dist
resolve module prop-types in /Users/Dawson/code/personal/www/node_modules/react-obfuscate/dist
  looking for modules in /Users/Dawson/code/personal/www/node_modules/next/node_modules
    /Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types doesn't exist (module as directory)
    resolve 'file' prop-types in /Users/Dawson/code/personal/www/node_modules/next/node_modules
      resolve file
        /Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types doesn't exist
        /Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.webpack.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.web.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.json doesn't exist
  looking for modules in /Users/Dawson/code/personal/www/node_modules
    /Users/Dawson/code/personal/www/node_modules/prop-types doesn't exist (module as directory)
    resolve 'file' prop-types in /Users/Dawson/code/personal/www/node_modules
      resolve file
        /Users/Dawson/code/personal/www/node_modules/prop-types doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.webpack.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.web.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.json doesn't exist
  looking for modules in /Users/Dawson/code/personal/www/node_modules
    /Users/Dawson/code/personal/www/node_modules/prop-types doesn't exist (module as directory)
    resolve 'file' prop-types in /Users/Dawson/code/personal/www/node_modules
      resolve file
        /Users/Dawson/code/personal/www/node_modules/prop-types doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.webpack.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.web.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.js doesn't exist
        /Users/Dawson/code/personal/www/node_modules/prop-types.json doesn't exist
[/Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types]
[/Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types]
[/Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.webpack.js]
[/Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.web.js]
[/Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.js]
[/Users/Dawson/code/personal/www/node_modules/next/node_modules/prop-types.json]
[/Users/Dawson/code/personal/www/node_modules/prop-types]
[/Users/Dawson/code/personal/www/node_modules/prop-types]
[/Users/Dawson/code/personal/www/node_modules/prop-types]
[/Users/Dawson/code/personal/www/node_modules/prop-types]
[/Users/Dawson/code/personal/www/node_modules/prop-types.webpack.js]
[/Users/Dawson/code/personal/www/node_modules/prop-types.webpack.js]
[/Users/Dawson/code/personal/www/node_modules/prop-types.web.js]
[/Users/Dawson/code/personal/www/node_modules/prop-types.web.js]
[/Users/Dawson/code/personal/www/node_modules/prop-types.js]
[/Users/Dawson/code/personal/www/node_modules/prop-types.js]
[/Users/Dawson/code/personal/www/node_modules/prop-types.json]
[/Users/Dawson/code/personal/www/node_modules/prop-types.json]
 @ ./~/react-obfuscate/dist/obfuscate.js 15:17-38

Describe the bug
Que using react-obfuscate on a Next.js repository, Google complains of non existing links caused by the library. All these links have the /obfuscate in the URL.

To Reproduce

1. Use the obfuscate component
2. Inspect the website on SSR
3. See that the link is /obfuscate

Expected behavior
I expect that the website either doesn't have that link or doesn't render the component at all on SSR. Also, consider CSR because it might happen the same.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @testing-library/react to v15.0.5
• chore(deps): update linter packages (@commitlint/cli, @commitlint/config-conventional, eslint-plugin-react-hooks)
• chore(deps): update react packages to v18.3.1 (react, react-dom)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency eslint to v9

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hi guys. Very helpful component; thanks to everyone who contributed!

Project I'm working on has strict types and I've defined basic type declarations for the Obfuscate component.

Are you willing to bundle complete types with the NPM package if I create a pull request containing them?

I have an address block like this:

<address>
	<Obfuscate email="[email protected]" />
	<br />
	<Obfuscate tel="+420 111 222 333" />
</address>

The second link always turns and stays backwards when I mouse over it.

I started just randomly messing with the tags and characters around Obfuscate to see what would happen and managed to work around the problem by doing this:

<address>
	<span>
		{' '}
		<Obfuscate email="[email protected]" />
	</span>
	<br />
	<span>
		{' '}
		<Obfuscate tel="+420 111 222 333" />
	</span>
</address>

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

It would be nice if link text was obscured, even if it may not need to be. Below I have an example of a human formatted phone number as the link text. It doesn't get obscured, which kind of defeats the purpose of using Obfuscate. I could "work around" this by simply omitting the children prop, but then the nicely formatted number would not be displayed.

const telephone = '+15553219876';
const formatted = '+1 555 321.9876';

<Obfuscate tel={telephone}>{formatted}</Obfuscate>

Before interaction:

<a href="obfuscated" style="unicode-bidi: isolate-override; direction: ltr;">+1 919 321.9876</a>

After interaction:

<a href="obfuscated" style="unicode-bidi: isolate-override; direction: ltr;">+1 919 321.9876</a>

I want to use an inline SVG letter icon as child inside <Obfuscate>, but this unfortunately does not work.

<Obfuscate email={'user@localhost'}>
  <svg viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
</Obfuscate>

It fails when calling this.reverse(propsList) here https://github.com/coston/react-obfuscate/blob/master/src/obfuscate.js#L99.

Are there plans to support this?

Is your feature request related to a problem? Please describe.
Assuming a normal build process and the example usage described in README.md, the example input produces an output that specifies the email in plaintext in the .js that is served. In this case, usage of react-obfuscate provides no protection, because certainly a malicious web-crawler which goes to the greater difficulty of rendering the DOM to harvest emails will also scan the .js for emails.

Describe the solution you'd like
I suggest that README.md should not claim that the <Obfuscate> component makes the email or link given in the example useless for spammers, and should detail the additional steps required to protect emails and links from spammers.

Given that there are 12,000 downloads per month for this package, improving it to obfuscate the children and props of the <Obfuscate> tag in the compiled source might be worth doing.

Describe alternatives you've considered
javascript-obfuscator can be used mangle string literals in source code appropriately, or they might be scrambled by hand and recovered with vanilla JavaScript.

When using multiple obfuscations and using css columns, the first obfuscation doesn't display properly, but fixes itself after hover, the code I am using:

<div with class columns>
  ...
          <p className="staff serif">
            <em>Staff</em>
            <br />
            {site.member.map((member, i) => (
              <React.Fragment key={i}>
                <Obfuscate
                  style={{ display: "inline-block" }}
                  email={member.email}
                >{`${member.name}, ${member.role}`}</Obfuscate>
                {site.member[i + 1] && <br />}
              </React.Fragment>
            ))}
          </p>
  ...
</div with class columns>

In the above code, the first member appears text-aligned right, with the words in reverse order, until I hover on them and they then appear properly.

When I remove the css columns property from the div, this fixes the issue.

The devDependency prettier was updated from 1.18.2 to 1.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency next was updated from 9.1.1 to 9.1.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

next is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

It would be great if this package didn't rely on Prop-Types.

I know it's basically a core of the obfuscation of the package, but it has one really big downside - many people don't click on a link but copy it and then paste it to their email app. And with this package, the pasted email is backwards. Would it be possible to solve this somehow?

Just wanted to say thank you for the snippet here: https://react-obfuscate.coston.io/ where you have Child Elements

Maybe you could put that example on the primary package Readme.md? That would help others in future.

Thank you,

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml
• The new Node.js version is in-range for the engines in 1 of your package.json files, so that was left alone

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Is your feature request related to a problem? Please describe.

I'm using Obfuscate with Chakra UI, a component library for React, that provides a Link component that is already on-brand and with useful utilities. Obfuscate works fine passing a React element type in the element prop, but the prop types validation expects only a string, not a React element type.

Example usage:

import { Link } from '@chakra-ui/react';
import Obfuscate from 'react-obfuscate';

function MyComponent() {
  return (
    <Obfuscate email="[email protected]" element={Link} />
  );
}

This works, but it produces the following console error log:

Warning: Failed prop type: Invalid prop `element` of type `object` supplied to `Obfuscate`, expected `string`.

Describe the solution you'd like

Probably just update the following line:

// obfuscate.js line 129
- element: T.string,
- element: T. oneOfType([T.string, T.elementType]),

Line: https://github.com/coston/react-obfuscate/blob/master/src/obfuscate.js#L129

and add a unit test for this scenario.

Describe alternatives you've considered

No alternatives considered yet!

--

I'd be happy to make this contribution, just want to open the issue first in case the element prop only accepts strings by design.

Thanks

--

EDIT: I realized later that there's a problem with the output, and the resulting a tag when setting element={Link} doesn't have an href 😅. That is because of the check here that is specifically doing Component === 'a'. Is there a reason for that, or could it be removed to pass those props in all cases?

Description

Refactor tests to use Jest + React Testing Library for better maintainability. This may also help with #280.

If I have the following child element, is the email in the title also obfuscate

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
I would like to have a className prop instead of wrapping component in a div/p

Describe alternatives you've considered
Wrapping the component in an HTML element like p

Additional context
N/A

Thank you!

<Obfuscate
  element="a"
  href="https://www.google.com"
  target="_blank"
  style={{
    textAlign: "left",
  }}
>
  Click Here
</Obfuscate>

Having target="_blank" does not open a new tab, but instead directs current window to the href.

Describe the bug
When hovering over an obfuscated link the the text moves to the left around 2px.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://react-obfuscate.coston.io/
2. Inspect element and give link 2px letter spacing
3. Hover over link
4. See text move to the left

I was trying to add a "click to whatsapp chat" on my page which is a regular href link with the user's phone number.
https://wa.me/phonenumber
https://faq.whatsapp.com/en/android/26000030/

Some other apps, such as skype use href="skype:..". Would it be possible for the user to specify a custom url and protocol so react-obfuscate could virtually support any url?

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.6.4 to 7.7.0.

• The devDependency @babel/core was updated from 7.6.4 to 7.7.0.
• The devDependency @babel/preset-env was updated from 7.6.3 to 7.7.0.
• The devDependency @babel/preset-react was updated from 7.6.3 to 7.7.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I tried using the linkText property but it didn't work. For example:

<Obfuscate tel="1-800-222-333" linkText="800.222.333" />

However, the following works fine. I wonder if the readme.md needs to be updated.

<Obfuscate tel="1-800-222-333">800.222.333</Obfuscate>

There are no type-definitions for this package here or on DefinitelyTyped.
This way it can not be properly used in Typescript projects.

Please add these if possible. Would be much appreciated. 🙏

Currently when used with my SSR node app on internet explorer 11 and Edge the phone number is reversed when its displayed until I mouse over the number where it will fix the rendering of it, and show the phone number correctly.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.