Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/linhuiw/react-deep-match
🔍 A deep regex match component for react, support ReactNode match.
https://github.com/linhuiw/react-deep-match
component find regex regex-match
Last synced: about 20 hours ago
JSON representation
🔍 A deep regex match component for react, support ReactNode match.
- Host: GitHub
- URL: https://github.com/linhuiw/react-deep-match
- Owner: linhuiw
- Created: 2017-08-30T06:29:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-30T08:52:48.000Z (over 2 years ago)
- Last Synced: 2024-11-06T14:16:31.309Z (14 days ago)
- Topics: component, find, regex, regex-match
- Language: JavaScript
- Homepage: https://linhuiw.github.io/react-deep-match
- Size: 878 KB
- Stars: 15
- Watchers: 14
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-deep-match
🔍 A deep regex match component for React, support ReactNode match.
React-deep-match support regular expression matches in a ReactDom or a string; and wrap each match a react node, also support custom wrap;
[See the demo](https://linhuiw.github.io/react-deep-match/)
## How To Use
For example:
```javascript
import DeepMatch from 'react-deep-match';// result:
testvalue
```
Also component support reactNode deep Match```javascript
testvalue
valuetest2
}
find="test"
/>
// result:
testvalue
valuetest2
```
And component support Regex match, and custom match wrap;
```javascripttestvalue123test
}
find={/[0-9]/g}
wrap={(matched) => {
return {matched};
}}
/>
// result:
testvalue{123}test
```
## Installation
```javascript
npm install react-deep-match --saveimport DeepMatch from 'react-deep-match';
```## API
react-deep-match supports these props;- text(string | ReactNode): Text or ReactNode, you want to search for
- find(string | RegExp): Text or a RegExp, the rules you want to match text
- wrap((match: string, index: string) => string | React.ReactNode): A Function, you want to wrap your matched texts, argument is the matched text## Related
[padolsey/findAndReplaceDOMText](https://github.com/padolsey/findAndReplaceDOMText) - 🔍 Find and replace DOM text
## License
MIT