react-highlight-words - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

dist/main.js

@@ -93,2 +93,6 @@ module.exports =
 	
+	var _memoizeOne = __webpack_require__(15);
+	
+	var _memoizeOne2 = _interopRequireDefault(_memoizeOne);
+	
 	Highlighter.propTypes = {
@@ -101,3 +105,3 @@ activeClassName: _propTypes2['default'].string,
 	  findChunks: _propTypes2['default'].func,
-	  highlightClassName: _propTypes2['default'].string,
+	  highlightClassName: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].string]),
 	  highlightStyle: _propTypes2['default'].object,
@@ -154,2 +158,11 @@ highlightTag: _propTypes2['default'].oneOfType([_propTypes2['default'].node, _propTypes2['default'].func, _propTypes2['default'].string]),
 	
+	  var lowercaseProps = function lowercaseProps(object) {
+	    var mapped = {};
+	    for (var key in object) {
+	      mapped[key.toLowerCase()] = object[key];
+	    }
+	    return mapped;
+	  };
+	  var memoizedLowercaseProps = (0, _memoizeOne2['default'])(lowercaseProps);
+	
 	  return _react2['default'].createElement(
@@ -164,5 +177,17 @@ 'span',
 	
+	        var highlightClass = undefined;
+	        if (typeof highlightClassName === 'object') {
+	          if (!caseSensitive) {
+	            highlightClassName = memoizedLowercaseProps(highlightClassName);
+	            highlightClass = highlightClassName[text.toLowerCase()];
+	          } else {
+	            highlightClass = highlightClassName[text];
+	          }
+	        } else {
+	          highlightClass = highlightClassName;
+	        }
+	
 	        var isActive = highlightCount === +activeIndex;
 	
-	        highlightClassNames = highlightClassName + ' ' + (isActive ? activeClassName : '');
+	        highlightClassNames = highlightClass + ' ' + (isActive ? activeClassName : '');
 	        highlightStyles = isActive === true && activeStyle != null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;
@@ -1645,4 +1670,48 @@
 
+/***/ }),
+/* 15 */
+/***/ (function(module, exports) {
+
+	'use strict';
+	
+	var simpleIsEqual = function simpleIsEqual(a, b) {
+	  return a === b;
+	};
+	
+	function index (resultFn) {
+	  var isEqual = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : simpleIsEqual;
+	
+	  var lastThis = void 0;
+	  var lastArgs = [];
+	  var lastResult = void 0;
+	  var calledOnce = false;
+	
+	  var isNewArgEqualToLast = function isNewArgEqualToLast(newArg, index) {
+	    return isEqual(newArg, lastArgs[index]);
+	  };
+	
+	  var result = function result() {
+	    for (var _len = arguments.length, newArgs = Array(_len), _key = 0; _key < _len; _key++) {
+	      newArgs[_key] = arguments[_key];
+	    }
+	
+	    if (calledOnce && lastThis === this && newArgs.length === lastArgs.length && newArgs.every(isNewArgEqualToLast)) {
+	      return lastResult;
+	    }
+	
+	    calledOnce = true;
+	    lastThis = this;
+	    lastArgs = newArgs;
+	    lastResult = resultFn.apply(this, newArgs);
+	    return lastResult;
+	  };
+	
+	  return result;
+	}
+	
+	module.exports = index;
+
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=main.js.map

package.json

 {
   "name": "react-highlight-words",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "React component to highlight words within a larger body of text",
@@ -100,2 +100,3 @@ "main": "dist/main.js",
     "highlight-words-core": "^1.2.0",
+    "memoize-one": "^4.0.0",
     "prop-types": "^15.5.8"
@@ -102,0 +103,0 @@ },

README.md

@@ -9,11 +9,20 @@ <img src="https://cloud.githubusercontent.com/assets/29597/11913937/0d2dcd78-a629-11e5-83e7-6a17b6d765a5.png" width="260" height="260">
 
-To use it, just provide it with an array of search terms and a body of text to highlight:
+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
-<Highlighter
-  highlightClassName='YourHighlightClass'
-  searchWords={['and', 'or', 'the']}
-  autoEscape={true}
-  textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
-/>
+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")
+);
 ```
@@ -35,4 +44,4 @@
 | 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 |
-| highlightClassName | String |  | CSS class name applied to highlighted text |
+| 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 |
@@ -39,0 +48,0 @@ | highlightTag | Node |  | Type of tag to wrap around highlighted matches; defaults to `mark` but can also be a React element (class or functional) |

No alert changes

Improved metrics

Total package byte prevSize

3026416

increased by8.75%

Lines of code

2372

increased by2.37%

Number of lines in readme file

60

increased by17.65%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedmemoize-one@^4.0.0

• + Addedmemoize-one@4.1.0(transitive)