Add demo and note about autoFocus

Closes #3

.eslintrc

@@ -3,8 +3,10 @@
     "node": true,
     "browser": true
   },
-  "ecmaFeatures": {
-    "jsx": true,
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+    }
   },
   "rules": {
     "comma-dangle": [2, "always-multiline"],

demo/index.html

@@ -58,6 +58,12 @@ <h2>demo four</h2>
   </p>
   <div id="demo-four"></div>
 
+  <h2>demo five</h2>
+  <p>
+    The trap contains an input with the autofocus attribute.
+  </p>
+  <div id="demo-five"></div>
+
   <p>
     <span style="font-size:2em;vertical-align:middle;">☜</span>
     <a href="https://github.com/davidtheclark/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>

demo/js/demo-five.jsx

@@ -0,0 +1,56 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+var FocusTrap = require('../../');
+
+var container = document.getElementById('demo-five');
+
+var DemoFive = React.createClass({
+  getInitialState: function() {
+    return {
+      activeTrap: false,
+    };
+  },
+
+  mountTrap: function() {
+    this.setState({ activeTrap: true });
+  },
+
+  unmountTrap: function() {
+    this.setState({ activeTrap: false });
+  },
+
+  render: function() {
+    var trap = (this.state.activeTrap) ? (
+      <FocusTrap
+        focusTrapOptions={{
+          onDeactivate: this.unmountTrap,
+        }}
+      >
+        <div className='trap'>
+          <button onClick={this.unmountTrap}>
+            deactivate trap
+          </button>
+          <div>
+            <a href='#'>Another focusable thing</a>
+          </div>
+          <div>
+            Autofocused input: <input autoFocus={true} />
+          </div>
+        </div>
+      </FocusTrap>
+    ) : false;
+
+    return (
+      <div>
+        <p>
+          <button key='button' onClick={this.mountTrap}>
+            activate trap
+          </button>
+        </p>
+        {trap}
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<DemoFive />, container);

demo/js/demo-two.jsx

@@ -36,7 +36,7 @@ var DemoTwo = React.createClass({
           <label htmlFor='focused-input' style={{ marginRight: 10 }}>
             Initially focused input
           </label>
-          <input refs='input' id='focused-input' />
+          <input ref='input' id='focused-input' />
         </p>
         <p>
           <button onClick={this.unmountTrap}>

demo/js/index.js

@@ -2,3 +2,4 @@ require('./demo-one');
 require('./demo-two');
 require('./demo-three');
 require('./demo-four');
+require('./demo-five');

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "eslint .",
     "demo-bundle": "browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "start": "budo demo/js/index.js:demo-bundle.js --dir demo -- -t babelify --extension=.jsx",
+    "start": "budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
     "test-dev": "zuul --local 8080 --open -- test/index.js",
     "pretest": "npm run lint",
     "test": "zuul -- test/index.js"