change the children's key to be unique to able html mouse events

README.md

@@ -12,7 +12,7 @@ npm install react-highlighter --save
 ```
 
 ## Usage
-```
+```js
 var Highlight = require('react-highlighter');
 
 <Highlight search="brown">The quick brown fox jumps over the lazy dog</Highlight>

lib/highlighter.js

@@ -1,22 +1,24 @@
 var React = require('react');
 var RegExpPropType = require('./regExpPropType');
 var escapeStringRegexp = require('escape-string-regexp');
+var blacklist = require('blacklist');
+var createReactClass = require('create-react-class');
+var PropTypes = require('prop-types');
 
-
-var Highlighter = React.createClass({displayName: "Highlighter",
+var Highlighter = createReactClass({displayName: "Highlighter",
   count: 0,
 
   propTypes: {
-    search: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
-      React.PropTypes.bool,
+    search: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.bool,
       RegExpPropType
     ]).isRequired,
-    caseSensitive: React.PropTypes.bool,
-    matchElement: React.PropTypes.string,
-    matchClass: React.PropTypes.string,
-    matchStyle: React.PropTypes.object
+    caseSensitive: PropTypes.bool,
+    matchElement: PropTypes.string,
+    matchClass: PropTypes.string,
+    matchStyle: PropTypes.object
   },
 
   getDefaultProps: function() {
@@ -29,7 +31,9 @@ var Highlighter = React.createClass({displayName: "Highlighter",
   },
 
   render: function() {
-    return React.DOM.span(React.__spread({}, this.props), this.renderElement(this.props.children));
+    var props = blacklist(this.props, 'search', 'caseSensitive', 'matchElement', 'matchClass', 'matchStyle');
+
+    return React.createElement('span', props, this.renderElement(this.props.children));
   },
 
   /**
@@ -170,7 +174,7 @@ var Highlighter = React.createClass({displayName: "Highlighter",
    */
   renderPlain: function(string) {
     this.count++;
-    return React.DOM.span({'key': this.count}, string);
+    return React.DOM.span({'key': string}, string);
   },
 
   /**
@@ -184,7 +188,7 @@ var Highlighter = React.createClass({displayName: "Highlighter",
   renderHighlight: function(string) {
     this.count++;
     return React.DOM[this.props.matchElement]({
-      key: this.count,
+      key: string,
       className: this.props.matchClass,
       style: this.props.matchStyle
     }, string);

package.json

@@ -1,10 +1,14 @@
 {
   "name": "react-highlighter",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Highlight select fragments of texts",
   "main": "lib/highlighter.js",
+  "files": [
+    "lib",
+    "dist"
+  ],
   "peerDependencies": {
-    "react": "^0.14.0"
+    "react": "^0.14.0 || ^15.0.0"
   },
   "scripts": {
     "test": "_mocha",
@@ -29,16 +33,19 @@
   },
   "homepage": "https://github.com/helior/react-highlighter",
   "devDependencies": {
-    "chai": "^2.1.2",
-    "coveralls": "^2.11.2",
-    "istanbul": "^0.4.1",
-    "jsdom": "^3.1.2",
-    "mocha": "^2.3.4",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "webpack": "^1.7.3"
+    "chai": "^3.5.0",
+    "coveralls": "^2.11.9",
+    "istanbul": "^0.4.4",
+    "jsdom": "^9.4.0",
+    "mocha": "^2.5.3",
+    "react": "^15.2.0",
+    "react-dom": "^15.2.0",
+    "webpack": "^1.13.1"
   },
   "dependencies": {
-    "escape-string-regexp": "^1.0.4"
+    "blacklist": "^1.1.2",
+    "create-react-class": "^15.5.2",
+    "escape-string-regexp": "^1.0.5",
+    "prop-types": "^15.5.8"
   }
 }

test/testHighlighter.js

@@ -1,5 +1,5 @@
-var React = require('react/addons');
-var TestUtils = React.addons.TestUtils;
+var React = require('react');
+var TestUtils = require('react-dom/test-utils');
 var ReactDOM = require('react-dom');
 var expect = require('chai').expect;
 var Highlight = require('..');
@@ -57,7 +57,7 @@ describe('Highlight element', function() {
     var element = React.createElement(Highlight, {search: 'Seek', matchStyle: { color: 'red' }}, 'Hide and Seek');
     var node = TestUtils.renderIntoDocument(element);
     var matches = TestUtils.scryRenderedDOMComponentsWithTag(node, 'strong');
-    expect(matches[0].getAttribute('style')).to.eql('color:red;');
+    expect(matches[0].getAttribute('style')).to.eql('color: red;');
   });
 
   it('should support passing props to parent element', function() {