react-obfuscate icon indicating copy to clipboard operation
react-obfuscate copied to clipboard

Add support for PropTypes.elementType in the element prop

Open guillermodlpa opened this issue 3 years ago • 0 comments

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?

Screenshot 2023-01-12 at 18 07 29

guillermodlpa avatar Jan 12 '23 16:01 guillermodlpa