Avoid the FocusTrap wrapping div by default

README.md

@@ -42,7 +42,7 @@ const Node = React.createClass({
     };
 
     return (
-      <HotKeys handlers={handlers}>
+      <HotKeys component="div" handlers={handlers}>
         Node contents
       </HotKeys>
     );

examples/master/index.js

@@ -1,7 +1,7 @@
 import {HotKeys, HotKeyMapMixin} from 'react-hotkeys';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import rand from 'lodash/number/random';
+import rand from 'lodash/random';
 
 const DEFAULT_NODE_SIZE = 100;
 const SIZE_INCREMENT = 5;
@@ -51,7 +51,9 @@ const App = React.createClass({
           </ul>
         </div>
         <HotKeys handlers={handlers} className={'viewport ' + (this.state && this.state.konamiTime ? 'konamiTime' : '')}>
-          {Array.apply(null, new Array(10)).map((e, i) => <Node key={i} />)}
+          <div>
+            {Array.apply(null, new Array(10)).map((e, i) => <Node key={i} />)}
+          </div>
         </HotKeys>
       </div>
     );
@@ -110,7 +112,7 @@ const Node = React.createClass({
     // - by default we would set it to -1 so it can only be directly clicked (& tapped?)
     //   or focused programattically
     return (
-      <HotKeys tabIndex="0" handlers={handlers} className="node" style={style}>
+      <HotKeys tabIndex="0" component="div" handlers={handlers} className="node" style={style}>
         Node
       </HotKeys>
     );

lib/FocusTrap.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+const DOCUMENT_FRAGMENT = 'documentFragment';
+
 const FocusTrap = React.createClass({
 
   propTypes: {
@@ -11,22 +13,52 @@ const FocusTrap = React.createClass({
 
   getDefaultProps() {
     return {
-      component: 'div'
+      component: DOCUMENT_FRAGMENT
     };
   },
 
+  onFocus(...args) {
+    const {children, onFocus} = this.props;
+
+    const child = React.Children.only(children);
+    if (child.onFocus) {
+      child.onFocus(...args);
+    }
+    if (onFocus) {
+      onFocus(...args);
+    }
+  },
+
+  onBlur(...args) {
+    const {children, onBlur} = this.props;
+
+    const child = React.Children.only(children);
+    if (child.onBlur) {
+      child.onBlur(...args);
+    }
+    if (onBlur) {
+      onBlur(...args);
+    }
+  },
+
   render() {
     const {
       component: Component,
       children,
       ...props
     } = this.props;
 
-    return (
-      <Component tabIndex="-1" {...props}>
-        {children}
-      </Component>
-    );
+    if (Component !== DOCUMENT_FRAGMENT) {
+      return (
+        <Component tabIndex="-1" {...props}>
+          {children}
+        </Component>
+      );
+    }
+
+    props.onFocus = this.onFocus;
+    props.onBlur = this.onBlur;
+    return React.cloneElement(React.Children.only(children), props);
   }
 
 });

package.json

@@ -15,6 +15,7 @@
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-2": "^6.11.0",
+    "babel-register": "^6.14.0",
     "css-loader": "^0.9.1",
     "eslint": "^1.10.3",
     "eslint-plugin-react": "^3.16.1",