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

Deep import.

import WordBreaks from 'device-agnostic-ui/public/components/WordBreaks.js';

Deep require.

const WordBreaks = require('device-agnostic-ui/public/components/WordBreaks');

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>;