Socket
Socket
Sign inDemoInstall

react-highlight-words

Package Overview
Dependencies
8
Maintainers
3
Versions
31
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.18.0 to 0.19.0

2

package.json
{
"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 &#124; 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.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc