WordBreaks

Renders text with aesthetically pleasing word break opportunities.

It inserts <wbr> elements at word break opportunities, which don’t appear in the clipboard when the text is copied.

Useful for narrow headings that contain long, camel cased strings.

Props

`placeholder`

Type	String (optional)
Default	`<wbr />`

Arbitrary; used in the processing of the text. Only needs to be customized if the text might contain the default value.

`children`

Type	String (required)

Text to render with word break opportunities.

Examples

How to import.

import WordBreaks from "device-agnostic-ui/WordBreaks.mjs";

A narrow <Heading> with <WordBreaks>.

import Heading from "device-agnostic-ui/Heading.mjs";
import WordBreaks from "device-agnostic-ui/WordBreaks.mjs";

const result = (
  <Heading style={{ maxWidth: "4em" }}>
    <WordBreaks>learnHTML5WithUs</WordBreaks>
  </Heading>
);

learnHTML5WithUs

A narrow <Heading> without <WordBreaks>.

import Heading from "device-agnostic-ui/Heading.mjs";

const result = <Heading style={{ maxWidth: "4em" }}>learnHTML5WithUs</Heading>;