Skip to content

Commit

Permalink
deps: React 19 support
Browse files Browse the repository at this point in the history
  • Loading branch information
sergei-startsev committed Jan 12, 2025
1 parent 7335d26 commit 2eb0171
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 230 deletions.
9 changes: 4 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@
"lodash": "^4.17.10",
"mocha": "^2.3.4",
"phantomjs2": "^2.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-transform-hmr": "^1.0.1",
"rimraf": "^2.4.4",
"standard": "^5.4.1",
Expand All @@ -96,10 +96,9 @@
},
"dependencies": {
"highlight-words-core": "^1.2.0",
"memoize-one": "^4.0.0",
"prop-types": "^15.5.8"
"memoize-one": "^4.0.0"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
}
}
55 changes: 18 additions & 37 deletions src/Highlighter.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,27 @@
/* @flow */
import { findAll } from 'highlight-words-core'
import PropTypes from 'prop-types'
import { createElement } from 'react'
import memoizeOne from 'memoize-one'

Highlighter.propTypes = {
activeClassName: PropTypes.string,
activeIndex: PropTypes.number,
activeStyle: PropTypes.object,
autoEscape: PropTypes.bool,
className: PropTypes.string,
findChunks: PropTypes.func,
highlightClassName: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string
]),
highlightStyle: PropTypes.object,
highlightTag: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func,
PropTypes.string
]),
sanitize: PropTypes.func,
searchWords: PropTypes.arrayOf(
PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(RegExp)
])
).isRequired,
textToHighlight: PropTypes.string.isRequired,
unhighlightTag: PropTypes.oneOfType([
PropTypes.node,
PropTypes.func,
PropTypes.string
]),
unhighlightClassName: PropTypes.string,
unhighlightStyle: PropTypes.object
}

/**
* Highlights all occurrences of search terms (searchText) within a string (textToHighlight).
* This function returns an array of strings and <span>s (wrapping highlighted words).
* Highlighter component
* @param {object} props - Component properties
* @param {string} [props.activeClassName] - The class name to be applied to an active match. Use along with `activeIndex`.
* @param {number} [props.activeIndex] - Specify the match index that should be actively highlighted. Use along with `activeClassName`.
* @param {object} [props.activeStyle] - The inline style to be applied to an active match. Use along with `activeIndex`.
* @param {boolean} [props.autoEscape] - Escape characters in searchWords which are meaningful in regular expressions.
* @param {string} [props.className] - CSS class name applied to the outer/wrapper `<span>`.
* @param {(options: object) => Array<{start: number, end: number}>} [props.findChunks] - Use a custom function to search for matching chunks. See the default `findChunks` function in `highlight-words-core` for signature.
* @param {string|object} [props.highlightClassName] - CSS class name applied to highlighted text or object mapping search term matches to class names.
* @param {object} [props.highlightStyle] - Inline styles applied to highlighted text.
* @param {React.ComponentType|string} [props.highlightTag] - Type of tag to wrap around highlighted matches. Defaults to `mark` but can also be a React component (class or functional).
* @param {(text: string) => string} [props.sanitize] - Process each search word and text to highlight before comparing.
* @param {Array<string|RegExp>} props.searchWords - Array of search words. String search terms are automatically cast to RegExps unless `autoEscape` is true.
* @param {string} props.textToHighlight - The text to highlight matches in.
* @param {React.ComponentType|string} [props.unhighlightTag] - Type of tag applied to unhighlighted parts. Defaults to `span` but can also be a React component (class or functional).
* @param {string} [props.unhighlightClassName] - CSS class name applied to unhighlighted text.
* @param {object} [props.unhighlightStyle] - Inline styles applied to the unhighlighted text.
* @param {object} [props.rest] - Additional attributes passed to the outer `<span>` element.
*/
export default function Highlighter ({
activeClassName = '',
Expand Down
Loading

0 comments on commit 2eb0171

Please sign in to comment.