@shhhplus/react-text-matcher
Version:
A React component that matches text using specified rules, supporting string and regular expressions.
76 lines (63 loc) • 2.34 kB
Markdown
# react-text-matcher
[](https://github.com/shhhplus/react-text-matcher/blob/master/LICENSE) [](https://www.npmjs.com/package/@shhhplus/react-text-matcher) [](https://codecov.io/gh/shhhplus/react-text-matcher) [](https://github.com/shhhplus/react-text-matcher/actions)
A React component that matches text using specified rules, supporting string and regular expressions.
Developed based on [text-matcher](https://www.npmjs.com/package/@shhhplus/text-matcher).
You can receive the matching results through render-props and have full control over how it renders.
If you just want text highlighting, recommend using [react-highlight-words](https://www.npmjs.com/package/@shhhplus/react-highlight-words), because it provides a simpler API.
## Install
```sh
npm install @shhhplus/react-text-matcher --save
```
## Usage
### Basic
```jsx
import TextMatcher from '@shhhplus/react-text-matcher';
const Demo = () => {
return (
<TextMatcher
rules="everyone"
text="Welcome everyone to come and join my birthday party."
>
{(nodes) => {
return (
<>
{nodes.map((node, idx) => {
return (
<Fragment key={idx}>
{typeof node === 'string' ? node : <span>{node.text}</span>}
</Fragment>
);
})}
</>
);
}}
</TextMatcher>
);
};
```
### RegExp
```jsx
import TextMatcher from '@shhhplus/react-text-matcher';
const Demo = () => {
return (
<TextMatcher
rules={[new RegExp('food', 'gi'), 'Apple']}
text="AppleTodayFoodAppleHappySunFood"
>
{(nodes) => {
return (
<>
{nodes.map((node, idx) => {
return (
<Fragment key={idx}>
{typeof node === 'string' ? node : <span>{node.text}</span>}
</Fragment>
);
})}
</>
);
}}
</TextMatcher>
);
};
```