[](https://npmjs.org/package/react-hyphen) [](https://circleci.com/gh/sergeysolovev/react-hyphen)
npm install react-hyphen
Hyphenate text in React components. Based on the
hyphenated library.
- Simple API: wrap your components with Hyphenated to hyphenate all nested
elements.
- Multiple languages: use any language from
hyphenated.
Install from the command line:
``shell`
npm install react-hyphen
This installation will include hyphenation patterns for the American English
language as a dependency.
Wrap your components with Hyphenated, so they will be rendered with soft
hyphens:
`js
import React from 'react';
import Hyphenated from 'react-hyphen';
const HyphenatedText = () => (
From Ambrose Bierce’s Devil’s Dictionary:
Self-evident, adj. Evident to one’s self and
to nobody else.
);
`
Soft hyphens are invisible but they tell the browser where to put real visible
hyphens.
By default, Hyphenated uses hyphenation patterns for the American Englishlanguage
language. To hyphenate text in another language, import necessary languages from
hyphenated
and pass as a prop:
`js
import React from 'react';
import Hyphenated from 'react-hyphen';
import fr from 'hyphenated-fr';
import de from 'hyphenated-de';
const MultilingualText = () => (
It is possible to hyphenate multilingual text.{' '}
Je suis l{"'"}itinéraire donné par Pierre, un ami français.
Das Universalgenie war nicht nur Schriftsteller, sondern auch
Rechtsanwalt.
Just wrap it using an appropriate language.
);
``
The resulting text will include optional hyphens using patterns for American
English, French and German languages.
MIT