<commit_before><img src="https://cloud.githubusercontent.com/assets/29597/11913937/0d2dcd78-a629-11e5-83e7-6a17b6d765a5.png" width="260" height="260">

React component to highlight words within a larger body of text.

Check out a demo [here](https://bvaughn.github.io/react-highlight-words).

## Usage

To use it, just provide it with an array of search terms and a body of text to highlight.

[Try this example in Code Sandbox.](https://codesandbox.io/s/5v8yqoxv7k)

```html
import React from "react";
import ReactDOM from "react-dom";
import Highlighter from "react-highlight-words";

ReactDOM.render(
  <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
  />,
  document.getElementById("root")
);
```

And the `Highlighter` will mark all occurrences of search terms within the text:

<img width="368" alt="screen shot 2015-12-19 at 8 23 43 am" src="https://cloud.githubusercontent.com/assets/29597/11914033/e3c319f6-a629-11e5-896d-1a5ce22c9ea2.png">

## Props

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| activeClassName | String |  | The class name to be applied to an active match. Use along with `activeIndex` |
| activeIndex | String |  | Specify the match index that should be actively highlighted. Use along with `activeClassName` |
| activeStyle | Object |  | The inline style to be applied to an active match. Use along with `activeIndex` |
| autoEscape | Boolean |  | Escape characters in `searchWords` which are meaningful in regular expressions |
| className | String |  | CSS class name applied to the outer/wrapper `<span>` |
| caseSensitive | Boolean |  | Search should be case sensitive; defaults to `false` |
| findChunks | Function |  | Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default `findChunks` function in [highlight-words-core](https://github.com/bvaughn/highlight-words-core) for signature. Have a look at the [custom findChunks example](https://codesandbox.io/s/k20x3ox31o) on how to use it. |
| highlightClassName | String or Object |  | CSS class name applied to highlighted text or object mapping text to class. |
| 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) |
| sanitize | Function |  | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` |
| searchWords | Array<String> | ✓ | Array of search words. The search terms are treated as RegExps unless `autoEscape` is set. |
| textToHighlight | String | ✓ | Text to highlight matches in |
| unhighlightClassName | String |  | CSS class name applied to unhighlighted text |
| unhighlightStyle | Object |  | Inline styles applied to unhighlighted text |<commit_msg>README tweaks<commit_after><img src="https://cloud.githubusercontent.com/assets/29597/11913937/0d2dcd78-a629-11e5-83e7-6a17b6d765a5.png" width="260" height="260">

React component to highlight words within a larger body of text.

Check out a demo [here](https://bvaughn.github.io/react-highlight-words).

## Usage

To use it, just provide it with an array of search terms and a body of text to highlight.

[Try this example in Code Sandbox.](https://codesandbox.io/s/5v8yqoxv7k)

```html
import React from "react";
import ReactDOM from "react-dom";
import Highlighter from "react-highlight-words";

ReactDOM.render(
  <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
  />,
  document.getElementById("root")
);
```

And the `Highlighter` will mark all occurrences of search terms within the text:

<img width="368" alt="screen shot 2015-12-19 at 8 23 43 am" src="https://cloud.githubusercontent.com/assets/29597/11914033/e3c319f6-a629-11e5-896d-1a5ce22c9ea2.png">

## Props

| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| activeClassName | String |  | The class name to be applied to an active match. Use along with `activeIndex` |
| activeIndex | String |  | Specify the match index that should be actively highlighted. Use along with `activeClassName` |
| activeStyle | Object |  | The inline style to be applied to an active match. Use along with `activeIndex` |
| autoEscape | Boolean |  | Escape characters in `searchWords` which are meaningful in regular expressions |
| className | String |  | CSS class name applied to the outer/wrapper `<span>` |
| caseSensitive | Boolean |  | Search should be case sensitive; defaults to `false` |
| findChunks | Function |  | Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default `findChunks` function in [highlight-words-core](https://github.com/bvaughn/highlight-words-core) for signature. Have a look at the [custom findChunks example](https://codesandbox.io/s/k20x3ox31o) on how to use it. |
| highlightClassName | String or Object |  | CSS class name applied to highlighted text or object mapping search term matches to class names. |
| 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) |
| sanitize | Function |  | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` |
| searchWords | Array<String> | ✓ | Array of search words. The search terms are treated as RegExps unless `autoEscape` is set. |
| textToHighlight | String | ✓ | Text to highlight matches in |
| unhighlightClassName | String |  | CSS class name applied to unhighlighted text |
| unhighlightStyle | Object |  | Inline styles applied to unhighlighted text |
{'fraction_non_alphanumeric': 0.1043875387375632, 'fraction_numerical': 0.03164247267982385, 'mean_word_length': 4.450666666666667, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5116528', 'n_tokens_mistral': 1903, 'n_tokens_neox': 1748, 'n_words': 686}