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]),
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?
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 theelement
prop, but the prop types validation expects only a string, not a React element type.Example usage:
This works, but it produces the following console error log:
Describe the solution you'd like
Probably just update the following line:
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 settingelement={Link}
doesn't have anhref
😅. That is because of the check here that is specifically doingComponent === 'a'
. Is there a reason for that, or could it be removed to pass those props in all cases?