react-highlight-words
Advanced tools
Comparing version 0.18.0 to 0.19.0
{ | ||
"name": "react-highlight-words", | ||
"version": "0.18.0", | ||
"version": "0.19.0", | ||
"description": "React component to highlight words within a larger body of text", | ||
@@ -5,0 +5,0 @@ "main": "dist/main.js", |
@@ -18,3 +18,2 @@ <img src="https://cloud.githubusercontent.com/assets/29597/11913937/0d2dcd78-a629-11e5-83e7-6a17b6d765a5.png" width="260" height="260"> | ||
const root = createRoot(document.getElementById("root")); | ||
@@ -48,3 +47,3 @@ root.render( | ||
| highlightStyle | Object | | Inline styles applied to highlighted text | | ||
| highlightTag | Node | | Type of tag to wrap around highlighted matches; defaults to `mark` but can also be a React element (class or functional) | | ||
| highlightTag | Node or String | | Type of tag to wrap around highlighted matches. Defaults to `mark` but can also be a React element (class or functional) | | ||
| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | | ||
@@ -55,2 +54,3 @@ | searchWords | Array<String | RegExp> | ✓ | Array of search words. String search terms are automatically cast to RegExps unless `autoEscape` is true. | | ||
| unhighlightStyle | Object | | Inline styles applied to unhighlighted text | | ||
| unhighlightTag | Node or String | | Type of tag applied to unhighlighted parts. Defaults to `span` but can also be a React element (class or functional) | | ||
| * | any | | Any other props (such as `title` or `data-*`) are applied to the outer/wrapper `<span>` | | ||
@@ -60,3 +60,4 @@ | ||
By default this component uses an HTML Mark Text element (`<mark>`) to wrap matched text, but you can inject a custom tag using the `highlightTag` property. This tag should be a React component that accepts the following properties: | ||
By default this component uses an HTML Mark Text element (`<mark>`) to wrap matched text, but you can inject a custom | ||
tag using the `highlightTag` property. This tag should be a React component that accepts the following properties: | ||
@@ -69,2 +70,3 @@ | Property | Type | Description | | ||
For example: | ||
```js | ||
@@ -77,2 +79,3 @@ const Highlight = ({ children, highlightIndex }) => ( | ||
## Installation | ||
``` | ||
@@ -87,2 +90,3 @@ yarn add react-highlight-words | ||
## License | ||
MIT License - fork, modify and use however you want. |
1601001
86