Releases: coston/react-obfuscate
Breaking style change: Removed display: inline-block 🚨
Summary
- React-Obfuscate is an inline element again.
- The style change will improve most UX.
- Users with multiple react-obfuscate elements in a block may have to adjust their code.
Who does the style change affect?
Users with consecutive <Obfuscate/> with/without inline elements inside a block.
Why the change?
Some users are experiencing formatting issues due to display: inline-block. Most users aren't using consecutive <Obfuscate/> or inline elements inside a block, without labels.
Example Case Needing Intervention:
<address>
<Obfuscate email="[email protected]" />
<br />
<Obfuscate tel="+69 111 222 333" />
</address>
react-obfuscate is an inline element. Using consecutive inline elements inside a block element causes an issue with the bidi-override reversal on Chrome. In the example case above, the bottom element will be affected by the top element, and flip to reverse.
Fix
Add any text between the elements, wrap <Obfuscate/> with another element (like <span>), or add style={{display:'inline-block'}} to prevent any issues.
Example Fix:
<address>
<Obfuscate style={{display:'inline-block'}} email="[email protected]" />
<br />
<Obfuscate style={{display:'inline-block'}} tel="+69 111 222 333" />
</address>Good Communication
Feel free to reach out for help, submit PRs, or just say hello! 👋
Enable human-readable copy to clipboard
A trick of this component is that it reverses the link text in the html to complicate consumption by robots. The link is reversed with css for human readability. Issue #14 brings to light the issue of usability after copying the link to the clipboard.
This release resolves the issue is by allowing [likely human initiated] mouseover or focus events to undo the reversing functionality. ⚡️⚡️✌️
Rename href prop to linkText 🧚♂️🚨
The href prop (added in the last version, 1.4.0) as been renamed to linkText to prevent uncertainty about its purpose ⚡️
Add custom href text to obfuscated link ☁️🆕
@mic has introduced a new prop, ✨ href ✨, to add a custom message to the obfuscated link. Thanks!