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

TypeString (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

TypeString (required)

Text to render with word break opportunities.

Examples

Deep import.
import WordBreaks from 'device-agnostic-ui/public/components/WordBreaks.js';
Deep require.
const WordBreaks = require('device-agnostic-ui/public/components/WordBreaks.js');
Index import. Convenient, but technically inferior to a deep import.
import { WordBreaks } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { WordBreaks } = require('device-agnostic-ui');
A narrow <Heading> with <WordBreaks>.
import { Heading, WordBreaks } from 'device-agnostic-ui';

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

learnHTML5WithUs

A narrow <Heading> without <WordBreaks>.
import { Heading } from 'device-agnostic-ui';

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

learnHTML5WithUs

Tags