coston / react-obfuscate

An intelligent React component to obfuscate any contact link!
https://react-obfuscate.coston.io
MIT License
110 stars 17 forks source link

Add support for PropTypes.elementType in the element prop #302

Open guillermodlpa opened 1 year ago

guillermodlpa commented 1 year ago

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="example@example.com" 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