react-highlight-words - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

dist/main.js

@@ -96,2 +96,3 @@ module.exports =
 	  activeIndex: _propTypes2['default'].number,
+	  activeStyle: _propTypes2['default'].object,
 	  autoEscape: _propTypes2['default'].bool,
@@ -101,3 +102,3 @@ className: _propTypes2['default'].string,
 	  highlightStyle: _propTypes2['default'].object,
-	  highlightTag: _propTypes2['default'].string,
+	  highlightTag: _propTypes2['default'].oneOfType([_propTypes2['default'].node, _propTypes2['default'].func, _propTypes2['default'].string]),
 	  sanitize: _propTypes2['default'].func,
@@ -120,2 +121,3 @@ searchWords: _propTypes2['default'].arrayOf(_propTypes2['default'].string).isRequired,
 	  var activeIndex = _ref$activeIndex === undefined ? -1 : _ref$activeIndex;
+	  var activeStyle = _ref.activeStyle;
 	  var autoEscape = _ref.autoEscape;
@@ -145,2 +147,3 @@ var className = _ref.className;
 	  var highlightClassNames = '';
+	  var highlightStyles = undefined;
 	
@@ -155,4 +158,8 @@ return _react2['default'].createElement(
 	        highlightCount++;
-	        highlightClassNames = highlightClassName + ' ' + (highlightCount === +activeIndex ? activeClassName : '');
 	
+	        var isActive = highlightCount === +activeIndex;
+	
+	        highlightClassNames = highlightClassName + ' ' + (isActive ? activeClassName : '');
+	        highlightStyles = isActive === true && activeStyle != null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;
+	
 	        return _react2['default'].createElement(
@@ -163,3 +170,3 @@ HighlightTag,
 	            key: index,
-	            style: highlightStyle
+	            style: highlightStyles
 	          },
@@ -166,0 +173,0 @@ text

package.json

 {
   "name": "react-highlight-words",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "React component to highlight words within a larger body of text",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

README.md

@@ -29,2 +29,3 @@ <img src="https://cloud.githubusercontent.com/assets/29597/11913937/0d2dcd78-a629-11e5-83e7-6a17b6d765a5.png" width="260" height="260">
 | 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 which are meaningful in regular expressions |
@@ -34,3 +35,3 @@ | className | String |  | CSS class name applied to the outer/wrapper `<span>` |
 | highlightStyle | Object |  | Inline styles applied to highlighted text |
-| highlightTag | String |  | Type of tag to wrap around highlighted matches; defaults to `mark` |
+| 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` |
@@ -37,0 +38,0 @@ | searchWords | Array<String> | ✓ | Array of search words |

No alert changes

Improved metrics

Total package byte prevSize

2579618

0.09%

Lines of code

2160

0.23%

Number of lines in readme file

48

2.13%

No dependency changes