Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
guillermodlpa opened this issue Jan 12, 2023 · 0 comments
Open

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

guillermodlpa opened this issue Jan 12, 2023 · 0 comments

Comments

@guillermodlpa
Copy link

guillermodlpa commented Jan 12, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant