- Notifications
You must be signed in to change notification settings - Fork2
Hyphenate text in React components
License
sergeysolovev/react-hyphen
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Hyphenate text in React components. Based on thehyphenated library.
- Simple API: wrap your components with
Hyphenatedto hyphenate all nestedelements. - Multiple languages: use any language fromhyphenated.
Install from the command line:
npm install react-hyphen
This installation will include hyphenation patterns for the American Englishlanguage as a dependency.
Wrap your components withHyphenated, so they will be rendered with softhyphens:
importReactfrom'react';importHyphenatedfrom'react-hyphen';constHyphenatedText=()=>(<Hyphenated> From Ambrose Bierce’s<em>Devil’s Dictionary</em>:<section><p><strong>Self-evident</strong>,<em>adj.</em> Evident to one’s self and to nobody else.</p></section></Hyphenated>);
Soft hyphens are invisible but they tell the browser where to put real visiblehyphens.
By default,Hyphenated uses hyphenation patterns for the American Englishlanguage. To hyphenate text in another language, import necessary languages fromhyphenatedand pass as alanguage prop:
importReactfrom'react';importHyphenatedfrom'react-hyphen';importfrfrom'hyphenated-fr';importdefrom'hyphenated-de';constMultilingualText=()=>(<Hyphenated> It is possible to hyphenate multilingual text.{' '}<Hyphenatedlanguage={fr}> Je suis l{"'"}itinéraire donné par Pierre, un ami français.</Hyphenated>{' '}<Hyphenatedlanguage={de}> Das Universalgenie war nicht nur Schriftsteller, sondern auch Rechtsanwalt.</Hyphenated>{' '} Just wrap it using an appropriate language.</Hyphenated>);
The resulting text will include optional hyphens using patterns for AmericanEnglish, French and German languages.
MIT
About
Hyphenate text in React components
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.