Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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;
```javascript

testvalue123test
}
find={/[0-9]/g}
wrap={(matched) => {
return {matched};
}}
/>
// result:


testvalue{123}test


```
## Installation
```javascript
npm install react-deep-match --save

import 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