@actualwave/space-wrap -- Inject invisible wrapping spaces after a sequence of special characters and/or spaces

README.md

@actualwave/react-space-wrap

Simple functional component that uses regular expression to add zero-width spaces to a string passed into value property and/or children. Zero-width 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-width 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-width 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}>ReallyLongTextToShowHowZeroWidthSpacesWorkAndThenMoreTextToHaveItOutOfContainerBoundsEvenIfContainerIsSuperWide</SpaceWrap>
);

index.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const { memo } = require('react');
const PropTypes = require('prop-types');

const DEFAULT_PATTERN = /(?:[^\w]|\s)+/gi;

const addWrapSpaces = (value, rgx = DEFAULT_PATTERN) => value ? value.replace(rgx, '$&\u200B') : '';

const SpaceWrap = memo(({ value, pattern, children }) => `${
    addWrapSpaces(value, pattern)
  }${
    addWrapSpaces(children, pattern)
  }`);

SpaceWrap.propTypes = {
  value: PropTypes.string,
  children: PropTypes.string,
  pattern: PropTypes.instanceOf(RegExp),
};

SpaceWrap.defaultProps = {
  value: '',
  children: undefined,
  pattern: DEFAULT_PATTERN,
};

exports.DEFAULT_PATTERN = DEFAULT_PATTERN;
exports.addWrapSpaces = addWrapSpaces;
exports.SpaceWrap = SpaceWrap;
exports.default = SpaceWrap;

package.json

{
  "name": "@actualwave/react-space-wrap",
  "description": "React component that adds zero-width whitespaces to text",
  "version": "0.0.2",
  "main": "index.js",
  "keywords": [
    "js",
    "javascript",
    "react",
    "string",
    "text",
    "line break"
  ],
  "homepage": "https://gist.github.com/burdiuz/850811337a581c720e6dc233969d0391",
  "bugs": {
    "url": "https://gist.github.com/burdiuz/850811337a581c720e6dc233969d0391",
    "email": "burdiuz@gmail.com"
  },
  "author": {
    "name": "Oleg Galaburda",
    "email": "burdiuz@gmail.com",
    "url": "http://actualwave.com/"
  },
  "peerDependencies": {
    "prop-types": "*",
    "react": "*"
  },
  "license": "MIT"
}

SpaceWrap.js

import { memo } from 'react';
import PropTypes from 'prop-types';

export const DEFAULT_PATTERN = /(?:[^\w]|\s)+/gi;

export const addWrapSpaces = (value, rgx = DEFAULT_PATTERN) => value ? value.replace(rgx, '$&\u200B') : '';

const SpaceWrap = memo(({ value, pattern, children }) => `${
    addWrapSpaces(value, pattern)
  }${
    addWrapSpaces(children, pattern)
  }`);

SpaceWrap.propTypes = {
  value: PropTypes.string,
  children: PropTypes.string,
  pattern: PropTypes.instanceOf(RegExp),
};

SpaceWrap.defaultProps = {
  value: '',
  children: undefined,
  pattern: DEFAULT_PATTERN,
};

export default SpaceWrap;