Skip to content

React Component that renders ASCII and non-ASCII characters separately

Notifications You must be signed in to change notification settings

yshing/react-ascii-char-split

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React-ascii-char-split

CircleCI codecov

React Component for separately rendering ASCII and non-ASCII String.

Example:

<AsciiCharSplit wrapperClassName="SOMETHING" asciiClassName="number" nonAsciiClassName="chinese">
    圓周率是3.1415926
</AsciiCharSplit>
// OR
<AsciiCharSplit wrapperClassName="SOMETHING" asciiClassName="number" nonAsciiClassName="chinese" text="圓周率是3.1415926"/>

Both render to

<span class="SOMETHING"><span class="chinese">圓周率是</span><span class="number">3.1415926</span></span>

API:

PropTypes:

AsciiCharSplit.propTypes = {
    wrapper: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
    textWrapper: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
    text: PropTypes.string,
    children: PropTypes.string,
    nonAsciiClassName: PropTypes.string,
    asciiClassName: PropTypes.string,
    wrapperClassName: PropTypes.string,
    allAsciiRegex: PropTypes.instanceOf(RegExp),
    asciiSplitRegex: PropTypes.instanceOf(RegExp),
};

DefaultProps:

AsciiCharSplit.defaultProps = {
    wrapper: 'span',
    textWrapper: 'span',
    wrapperClassName: 'char-split-wrapper',
    asciiClassName: 'ascii',
    nonAsciiClassName: 'non-ascii',
    text: '',
    children: '',
    allAsciiRegex: /^[ -~]+$/,
    asciiSplitRegex: /([ -~]+)/,
    asciiStyle: undefined,
    nonAsciiStyle: undefined,
    style: undefined,
};

About

React Component that renders ASCII and non-ASCII characters separately

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published