react-pretty-email-wrap
v0.1.4
Published
Allow emails to wrap in a human-readable way
Downloads
6
Maintainers
Readme
react-pretty-email-wrap
Allow emails to wrap in a human-readable way
Why?
Browsers treat email addresses as single words, which can cause horizontal overflow on mobile devices. This component resolves the issue by allowing email addresses to wrap naturally, breaking the text after special characters like @
and .
for better readability.
Try it yourself on this demo page.
Install
npm i react-pretty-email-wrap
react-pretty-email-wrap
requires react
and react-dom
as peer dependencies.
How does it work?
The component takes a string
and insert Word Break Opportunity tags (<wbr />
) to help it wrap in a human readable way.
Usage
Input
<PrettyEmailWrap>[email protected]</PrettyEmailWrap>
Output
name<wbr />@domain.<wbr />com
Development
npm Scripts
In the project directory, you can npm run
:
dev
: Starts up a development server with hot module replacementtest
: Runs the test suitelint
: Runs the ESLint linterbuild:lib
: Buildreact-pretty-email-wrap
, ready to be publishedbuild:docs
: Build the documentation
Deployment
- Update
CHANGELOG.md
following the Keep a Changelog format - Run
npm run deploy
- Update
package.json
andpackage-lock.json
using semver:"version": "<semver>"
- Once merged to
master
, tag:git tag <semver>
- Publish to npm:
npm publish
Contribution
Contribution is welcomed, feel free to raise an issue or PR.