@actualwave/react-space-wrap

Simple functional component that uses regular expression to add zero-length spaces to a string passed into value property and/or children. Zero-length spaces are used to add line breaks which appear when text does not fit into container. It can be used with value property

import SpaceWrap from '@actualwave/react-space-wrap';

export const MyText = () => (
  <SpaceWrap value="Really long text to show how zero-length spaces work." />
);

or using children property

import SpaceWrap from '@actualwave/react-space-wrap';

export const MyText = () => (
  <SpaceWrap>Really long text to show how zero-length spaces work.</SpaceWrap>
);

or both

import SpaceWrap from '@actualwave/react-space-wrap';

export const MyText = () => (
  <SpaceWrap value="Really long text to show ">how zero-length spaces work.</SpaceWrap>
);

It also allows to specify custom pattern to find places where line breaks should be placed.

import SpaceWrap from '@actualwave/react-space-wrap';

export const MyText = () => (
  <SpaceWrap pattern={/[A-Z][a-z]+/g}>ReallyLongTextToShowHowZeroLengthSpacesWorkAndThenMoreTextToHaveItOutOfContainerBoundsEvenIfContainerIsSuperWide</SpaceWrap>
);