react-ascii-char-split
v1.0.1
Published
[![CircleCI](https://circleci.com/gh/yshing/react-ascii-char-split.svg?style=svg)](https://circleci.com/gh/yshing/react-ascii-char-split) [![codecov](https://codecov.io/gh/yshing/react-ascii-char-split/branch/master/graph/badge.svg)](https://codecov.io/gh
Downloads
3
Readme
React-ascii-char-split
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,
};