0.18.0 • Published 8 months ago

react-highlight-words v0.18.0

Weekly downloads
200,129
License
MIT
Repository
github
Last release
8 months ago

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

Check out a demo here.

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.

import React from "react";
import { createRoot } from "react-dom/client";
import Highlighter from "react-highlight-words";


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

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

Props

PropertyTypeRequired?Description
activeClassNameStringThe class name to be applied to an active match. Use along with activeIndex
activeIndexNumberSpecify the match index that should be actively highlighted. Use along with activeClassName
activeStyleObjectThe inline style to be applied to an active match. Use along with activeIndex
autoEscapeBooleanEscape characters in searchWords which are meaningful in regular expressions
classNameStringCSS class name applied to the outer/wrapper <span>
caseSensitiveBooleanSearch should be case sensitive; defaults to false
findChunksFunctionUse 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 for signature. Have a look at the custom findChunks example on how to use it.
highlightClassNameString or ObjectCSS class name applied to highlighted text or object mapping search term matches to class names.
highlightStyleObjectInline styles applied to highlighted text
highlightTagNodeType of tag to wrap around highlighted matches; defaults to mark but can also be a React element (class or functional)
sanitizeFunctionProcess each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
searchWordsArray<String | RegExp>Array of search words. String search terms are automatically cast to RegExps unless autoEscape is true.
textToHighlightStringText to highlight matches in
unhighlightClassNameStringCSS class name applied to unhighlighted text
unhighlightStyleObjectInline styles applied to unhighlighted text
*anyAny other props (such as title or data-*) are applied to the outer/wrapper <span>

Custom highlight tag

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:

PropertyTypeDescription
childrenStringText to be highlighted
highlightIndexNumberIndex of matched text

For example:

const Highlight = ({ children, highlightIndex }) => (
  <strong className="highlighted-text">{children}</strong>
);

Installation

yarn add react-highlight-words
npm i --save react-highlight-words

License

MIT License - fork, modify and use however you want.

@andromeda-ui/select@jessjess/react-site-componentsreact-highlight-searchboxreact-dadata-suggestions-forkreact-dadata-suggestions-v2cf-storybooktest-acttgintonicdesktop-transfer-client@caoyongmeng/ui-1bigendianuistocktracker@decooda_inc/media-carousel@luisrodriguezld/smart-tablehotee-adminteespace-drive-appteespace-talk-appcra-template-ifunpluscra-template-antd-ifunplusstadtenergie@webjet/react@wix/quix-clientalgaeh-react-components@yeli_ruan/y-table@yuniscm/yuniappjs-pkgabc-common-headerabc-generalabc-generalsabc-squard-cardlog8000v3ra-antd-tableant-design-blocksantd-advancedv4anton-vlasik-react-test-component@mkiloyan/plugins@ezcater/recipe@fendy3002/string-tools@eeacms/volto-forests-theme@eeacms/volto-industry-theme@elliemae/ds-treeview@eeacms/volto-addons-forest@elliemae/ds-devutils@exivity/ui@drill4j/ui-kitdcg-next@vidya0102/comments@vikadata/componentsdtd-testciri-transformer1chakra-adminconversation-panel-hcicbp-theme-react-starterbems-theme-react-starterbeisen-phoenix-fork-mobile-person-selectbj-beggars-toolsaviary-iiif-playerassui@savantly/sprout-ui@shayan2601/new-description@shayan2601/new-descriptionn@shayan2601/new-package@shayan2601/transcript@shayan2601/transcript-package@shayan2601/transcriptpackage@shayan2601/transcriptss@stayfocus/pluginsd-react-componentscw-componentsdoorson-uidemotitlecustomize-easy-ui-componentcustomize-easy-ui-storybookeasyenrollsdkchakra-ui-autocompletechakra-ui-autocomplete-adaptedcompany-modulecj-generalsenhanced-antdecheng-clifeffery_antd_componentsfeffery_utils_componentsfind-super-antdfind-antdfuel-ui-comfz-browsefoxframefrc-ui-profrox-uimate-design-systemlobster-logviewmedia-carouselgerproc-clientgennlife-douigeneric-react-autocompletegeneric-react-formgitdocsgoodwill_disease_projectlabeler-uiknowdesignjylib
0.18.0

8 months ago

0.17.0

2 years ago

0.16.0

4 years ago

0.15.1

4 years ago

0.15.0

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.0

5 years ago

0.10.0

5 years ago

0.9.0

5 years ago

0.8.1

5 years ago

0.8.0

5 years ago

0.7.2

6 years ago

0.7.1

6 years ago

0.7.0

6 years ago

0.6.0

6 years ago

0.5.0

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.1.7

6 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago