diff --git a/README.md b/README.md
index 6070a2b..929f3a7 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,15 @@
 
 Components for providing validation via React context.
 
+
+# Motivation
+
+There are several scenarios where a parent component's validation depends on whether or not its descendant elements validate. By
+using the [React `context` api][react-docs-context], manual crawling of the React render tree can be avoided. Instead, a handler
+function in the context can be called to update the parent's state whenever the descendant updates. This simplifies the
+implementation of validation in the parent component.
+
+
 # Install
 
 This package is available on `npm`. Install it using:
@@ -29,6 +38,10 @@ change handlers. In general, a validity change handler has the following API:
   - `@param {Validity} isValid` - The current validity of the component.
   - `@param {Validity} wasValid` - The previous validity of the component.
 
+The `name` identifier is also key to this library. It allows a collection of descendants to be validated by a parent component.
+Essentially, this library provides a way of tracking the validities of these various names. Note that this is **not** the same as
+tracking the validities of the components themselves, since a component's name may change as well!
+
 ## `Validates`
 
 The `Validates` component is used to wrap a component that can be validated, providing the logic for validation change handlers.
@@ -40,62 +53,92 @@ The `Validates` component is used to wrap a component that can be validated, pro
 - `{Function} onValidChange` - Validity change handler.
 - `{ReactElement} children` - Children. The component only accepts a single child, and will simply render as that child.
 
+#### When is the `onValidChange` handler called?
+
+The function passed as the `onValidChange` prop will be called when:
+- The component mounts and the `validates` prop is not `undefined`
+- The component unmounts and the `validates` prop is not `undefined`
+- The component's `validates` prop changes
+
+During these cases, the `onValidChange` handler is called with:
+- The component's `name` prop
+- The component's validity
+- The component's previous validity
+
+However, if the component's `name` changes and the `validates` prop is not `undefined`, then the `onValidChange` handler will
+first be called with:
+- The previous `name` prop
+- `undefined`, to indicate that the previous `name` no longer has validation defined
+- The component's previous validity, if applicable
+
+Then, if the `validates` prop has changed, the `onValidChange` handler is called **a second time**.
+
 ### Context
 
-If `onValidChange` is present in `Validate`'s context, it will call that context handler appropriately.
+If `onValidChange` is present in `Validate`'s context, it will call that context handler whenever the `onValidChange` handler in
+the props would be called, as described above.
 
 ### Example usage
 
 ```jsx
 import React from 'react';
+import { string, func } from 'prop-types';
 import { Validates } from 'react-validation-context';
 
+/**
+ * An input that only validates when its value is non-empty and non-whitespace.
+ */
 export default class RequiredInput extends React.Component {
-  constructor (props) {
-    super(...arguments);
+  constructor(props) {
+    super();
 
     // Set up the initial state based on whether the initial value validates
     const { value, defaultValue } = props;
-    this.state = { validates: this.validate(value || defaultValue) };
+    const validates = this.validate(value || defaultValue);
+    this.state = { validates };
+
+    this.onChange = this.onChange.bind(this);
   }
 
-  validate (val) {
-    // Check that the value exists and has non-whitespace content
-    return val && val.trim().length > 0;
+  // Check that the value exists and is non-whitespace
+  validate(value) {
+    return value && value.trim().length > 0;
   }
 
-  render () {
-    const { onChange: origOnChange, onValidChange, name, children, ...rest } = this.props;
-    const { validates } = this.state;
+  // Wrap the onChange handler to update `this.state.validates`
+  onChange(e) {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(e);
+    }
+
+    const validates = this.validate(e.target.value);
+    this.setState({ validates });
+  }
 
-    // Wrap the onChange handler to update `this.state.validates`
-    const onChange = (e) => {
-      if (origOnChange) {
-        origOnChange(e);
-      }
+  render() {
+    const { onChange } = this;
+    const { onValidChange, name, ...inputProps } = this.props;
+    const { validates } = this.state;
 
-      this.setState({ validates: this.validate(e.target.value) });
-    };
+    // Set up `input` props
+    Object.assign(inputProps, { onChange, name });
 
     // Render `input` and validation context-aware `Validates`
-    return <Validates validates={validates} onValidChange={onValidChange} name={name}>
-      <label>
-        <input type="text" onChange={onChange} name={name} {...rest} />
-        {children}
-        {validates ? null : 'This input is required'}
-        </label>
+    return <Validates validates={ validates } onValidChange={ onValidChange } name={ name }>
+      <input type='text' { ...inputProps } />
     </Validates>;
   }
 }
 
 RequiredInput.propTypes = {
-  name: React.PropTypes.string.isRequired, // Input identifier name
-  value: React.PropTypes.string, // Input value
-  defaultValue: React.PropTypes.string, // Default input value
-  onChange: React.PropTypes.func, // onChange handler for input
-  onValidChange: React.PropTypes.func, // validity change handler
-  children: React.PropTypes.node // React children
+  name: string.isRequired, // Input identifier name
+  value: string, // Input value
+  defaultValue: string, // Default input value
+  onChange: func, // onChange handler for input
+  onValidChange: func // validity change handler
 };
+
 ```
 
 
@@ -116,6 +159,15 @@ the component itself.
 
 This component also inherits all the props of `Validate`.
 
+#### When is the `validate` function called?
+
+The function passed as the `validate` prop will be called whenever the component must validate its descendants. This can occur
+when the component first mounts, or when at least one of its descendants has changed its name **or** validity.
+
+Whenever the `validate` function is called, it is given a single argument: an `Object` whose keys are the `name`s of the
+descendant components, and whose values are their validities. The `validate` function should then return the validity of the
+component.
+
 ### Context
 
 If `onValidChange` is present in `Validate`'s context, it will call that context handler appropriately.
@@ -124,46 +176,60 @@ If `onValidChange` is present in `Validate`'s context, it will call that context
 
 ```jsx
 import React from 'react';
+import { string, func, node } from 'prop-types';
 import { Validate } from 'react-validation-context';
 
+import styles from './form.less';
+
 export default class Form extends React.Component {
-  constructor () {
-    super(...arguments);
+  constructor() {
+    super();
 
     // The form is initially valid
     this.state = { validates: true };
+
+    this.onValidChange = this.onValidChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
   }
 
-  render () {
-    const { onValidChange: origOnValidChange, onSubmit: origOnSubmit, children, name, className, ...rest } = this.props;
-    const { validates } = this.state;
+  // Wrap the onValidChange handler to set this.state.validates
+  onValidChange(name, isValid, wasValid) {
+    const { onValidChange } = this.props;
+    if (onValidChange) {
+      onValidChange(name, isValid, wasValid);
+    }
 
-    // The form is invalid if there are any invalid items in its validation context
-    const validate = valids => Object.keys(valids).every(k => valids[k] !== false);
+    this.setState({ validates: isValid });
+  }
 
-    // Wrap the onValidChange handler to set this.state.validates
-    const onValidChange = (name, isValid, wasValid) => {
-      if (origOnValidChange) {
-        origOnValidChange(name, isValid, wasValid);
-      }
+  // Wrap the onSubmit handler to prevent submission if the form is invalid
+  onSubmit(e) {
+    const { onSubmit } = this.props;
+    if (onSubmit) {
+      onSubmit(e);
+    }
 
-      this.setState({ validates: isValid });
+    if (!this.state.validates) {
+      e.preventDefault();
     }
+  }
 
-    // Wrap the onSubmit handler to prevent submission if the form is invalid
-    const onSubmit = e => {
-      if (origOnSubmit) {
-        origOnSubmit(e);
-      }
+  // The form is invalid if there are any invalid items in its validation context
+  validate(valids) {
+    return Object.keys(valids).every(k => valids[k] !== false);
+  }
 
-      if (!this.state.validates) {
-        e.preventDefault();
-      }
-    }
+  render() {
+    const { onSubmit, onValidChange, validate } = this;
+    const { children, name, ...formProps } = this.props;
+    delete formProps.onValidChange; // avoid passing down `onValidChange` from props
+
+    // Set up `form` props
+    Object.assign(formProps, { onSubmit, name });
 
     // Render `form` and create validation context `Validate` (which is also validation context-aware)
-    return <Validate validate={validate} onValidChange={onValidChange} name={name}>
-      <form onSubmit={onSubmit} name={name} {...rest}>
+    return <Validate validate={ validate } onValidChange={ onValidChange } name={ name }>
+      <form { ...formProps }>
         {children}
       </form>
     </Validate>;
@@ -171,11 +237,12 @@ export default class Form extends React.Component {
 }
 
 Form.propTypes = {
-  name: React.PropTypes.string.isRequired, // Form identifier name
-  onSubmit: React.PropTypes.func, // onSubmit handler for form
-  onValidChange: React.PropTypes.func, // validity change handler
-  children: React.PropTypes.node // React children
+  name: string.isRequired, // Form identifier name
+  onSubmit: func, // onSubmit handler for form
+  onValidChange: func, // validity change handler
+  children: node // React children
 };
+
 ```
 
 
diff --git a/demo/.babelrc b/demo/.babelrc
index 0939263..686781c 100644
--- a/demo/.babelrc
+++ b/demo/.babelrc
@@ -1,5 +1,16 @@
 {
-    "presets": ["react", "es2015"],
-    "plugins": ["transform-object-rest-spread"]
+    "presets": [
+        ["env", {
+            "targets": {
+                "browsers": ["defaults"]
+            },
+            "modules": false
+        }],
+        "react"
+    ],
+    "plugins": [
+        "react-hot-loader/babel",
+        "transform-object-rest-spread"
+    ]
 }
 
diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json
index dd690ce..25d2a60 100644
--- a/demo/.eslintrc.json
+++ b/demo/.eslintrc.json
@@ -1,24 +1,4 @@
 {
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "impliedStrict": true,
-      "jsx": true
-    }
-  },
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "globals": {
-    "require": true,
-    "module": true
-  },
-  "plugins": [
-    "react"
-  ]
+  "extends": ["godaddy"]
 }
 
diff --git a/demo/README.md b/demo/README.md
index db766e6..0769b6c 100644
--- a/demo/README.md
+++ b/demo/README.md
@@ -8,15 +8,10 @@ Demo for react-validation-context.
 
 Install the dependencies: `npm install`
 
-If you want to simultaneously work on `react-validation-context`, [you can use `npm link`][npm-docs-link].
-
 The following build scripts are available. You can run them using `npm run <script>`.
 
 - `live` - Starts a local development server on port `8080`, and enables hot-reloading.
 - `build` - Builds for a development environment.
 - `watch` - Like `build`, but also watches for changes.
-- `dist` - Builds for a production environment.
-
-
-[npm-docs-link]: https://docs.npmjs.com/cli/link (npm link documentation)
+- `lint` - Runs the linter.
 
diff --git a/demo/build.js b/demo/build.js
index 519820d..7490f8c 100644
--- a/demo/build.js
+++ b/demo/build.js
@@ -1,76 +1,64 @@
-/* eslint-env node */
-/* eslint no-console: "off" */
-/* eslint strict: "off" */
-
-'use strict';
+/* eslint-disable no-console */
 
+const path = require('path');
 const process = require('process');
 const webpack = require('webpack');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const ProgressBar = require('progress');
 
-const production = process.argv[2] === 'production';
-const webpackConfig = require(production ? './webpack.config.production.js' : './webpack.config.js');
+const webpackCompiler = webpack(function getWebpackConfig(action) {
+  switch (action) {
+    case 'live':
+      return require('./webpack.config.live.js');
+    default:
+      return require('./webpack.config.js');
+  }
+}(process.argv[2]));
 
 const webpackBuildFinished = (err, stats) => {
   if (err) {
-    console.log("\n\n===== WEBPACK BUILD FAILED =====");
+    console.log('\n\n===== WEBPACK BUILD FAILED =====');
     throw err;
   } else {
-    console.log("\n\n===== WEBPACK BUILD FINISHED =====");
-    console.log(stats.toString({ colors: true, timings: true, cached: false }));
+    console.log('\n\n===== WEBPACK BUILD FINISHED =====');
+    console.log(stats.toString({
+      colors: true,
+      timings: true,
+      cached: false
+    }));
   }
 };
 
-function webpackCompiler() {
-  const compiler = webpack(webpackConfig);
-  const webpackProgress = new ProgressBar(
-    '[:bar] :percent eta :etas  :msg', {
-      total: 100, complete: '=', incomplete: ' ', width: 10
-    }
-  );
-
-  let webpackPrevPercent = 0;
-  compiler.apply(new ProgressPlugin((percent, msg) => {
-    webpackProgress.tick((percent - webpackPrevPercent) * 100, { 'msg': msg });
-    webpackPrevPercent = percent;
-  }));
-
-  return compiler;
-}
-
-if (process.argv[2] === 'watch') {
-  webpackCompiler().watch({}, webpackBuildFinished);
-  return;
-} else if (process.argv[2] === 'live') {
-  const app = require('express')();
-  const webpackDevMiddleware = require('webpack-dev-middleware');
-  const webpackHotMiddleware = require('webpack-hot-middleware');
-
-  Object.keys(webpackConfig.entry).forEach(function entries(key) {
-    webpackConfig.entry[key].push('webpack-hot-middleware/client');
-  });
-  webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-  webpackConfig.module.loaders.forEach(function loaders(loader) {
-    if (loader.loaders && loader.loaders[0] === 'babel') {
-      loader.loaders.unshift('react-hot');
-    } else if (loader.loader === 'babel') {
-      loader.loader = ['react-hot', 'babel'];
-    }
-  });
-
-  const compiler = webpackCompiler();
-
-  app.use(webpackDevMiddleware(compiler, {
-    publicPath: webpackConfig.output.publicPath,
-    stats: { colors: true, timings: true, cached: false }
-  }));
+const webpackProgress = new ProgressBar(
+  '[:bar] :percent eta :etas  :msg', {
+    total: 100, complete: '=', incomplete: ' ', width: 10
+  }
+);
 
-  app.use(webpackHotMiddleware(compiler));
+webpackCompiler.apply(new ProgressPlugin((percent, msg) => {
+  webpackProgress.update(percent, { msg });
+}));
 
-  app.listen(8080);
-  return;
+switch (process.argv[2]) {
+  case 'watch':
+    webpackCompiler.watch({}, webpackBuildFinished);
+    break;
+  case 'live': {
+    const WebpackDevServer = require('webpack-dev-server');
+    const server = new WebpackDevServer(webpackCompiler, {
+      contentBase: [
+        path.join(__dirname, 'dist'),
+        path.join(__dirname, 'public')
+      ],
+      hot: true,
+      compress: true,
+      historyApiFallback: true,
+      stats: { colors: true, timings: true, cached: false }
+    });
+    server.listen(8080, 'localhost');
+    break;
+  }
+  default:
+    webpackCompiler.run(webpackBuildFinished);
 }
 
-webpackCompiler().run(webpackBuildFinished);
-
diff --git a/demo/package.json b/demo/package.json
index db421f0..b95f8c1 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -7,50 +7,46 @@
     "live": "node build.js live",
     "watch": "node build.js watch",
     "build": "node build.js",
-    "dist": "node build.js production",
-    "prepublish": "node build.js production",
+    "prepare": "node build.js",
     "lint": "eslint *.js src"
   },
   "author": "GoDaddy Operating Company, LLC",
-  "contributors": ["Stanley Zhang <sxzhang@godaddy.com>"],
+  "contributors": [
+    "Stanley Zhang <sxzhang@godaddy.com>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:godaddy/react-validation-context"
+  },
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^6.3.6",
-    "babel-core": "^6.9.0",
-    "babel-eslint": "^6.0.4",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-object-rest-spread": "^6.8",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0",
-    "bundle-loader": "^0.5.4",
-    "classnames": "^2.2",
-    "clean-webpack-plugin": "^0.1",
-    "css-loader": "^0.23.1",
-    "eslint": "^2.10.2",
-    "eslint-import-resolver-webpack": "^0.3.1",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-import": "^1.9.2",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "classnames": "^2.2.5",
+    "clean-webpack-plugin": "^0.1.16",
+    "css-loader": "^0.28.4",
+    "eslint": "^4.3.0",
+    "eslint-config-godaddy-react": "^2.1.0",
+    "eslint-loader": "^1.9.0",
     "eslint-plugin-json": "^1.2.0",
-    "eslint-plugin-mocha": "^4.3.0",
-    "eslint-plugin-react": "^5.1.1",
-    "express": "^4.14.0",
-    "extract-text-webpack-plugin": "^1.0",
-    "file-loader": "^0.8",
-    "html-webpack-plugin": "^2.21",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
-    "normalize.css": "^4.2.0",
-    "postcss-loader": "^0.9.1",
-    "progress": "^1.1.8",
-    "react": "15.x.x",
-    "react-dom": "15.x.x",
-    "react-hot-loader": "^1.3.0",
-    "react-lite": "0.15.x",
-    "react-validation-context": "^1.0.0",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5",
-    "webpack": "^1.13.0",
-    "webpack-dev-middleware": "^1.6.1",
-    "webpack-hot-middleware": "^2.12.2"
+    "eslint-plugin-mocha": "^4.8.0",
+    "eslint-plugin-react": "^7.1.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^2.29.0",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
+    "normalize.css": "^7.0.0",
+    "progress": "^2.0.0",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-hot-loader": "^3.0.0-beta.7",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.3.0",
+    "webpack-dev-server": "^2.5.1"
   }
 }
diff --git a/demo/src/.eslintrc.json b/demo/src/.eslintrc.json
new file mode 100644
index 0000000..ac8854f
--- /dev/null
+++ b/demo/src/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+    "extends": ["godaddy-react"]
+}
+
diff --git a/demo/src/app.js b/demo/src/app.js
index caf0df7..cd81da1 100644
--- a/demo/src/app.js
+++ b/demo/src/app.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { render } from 'react-dom';
 
 import Form from './form';
 import Input from './input';
@@ -7,22 +6,18 @@ import Input from './input';
 import 'normalize.css';
 import styles from './app.less';
 
-function App() {
-  return <div className={styles.app}>
-    <Form name="form-example" action=".">
-      <Input name="foo" validate={v => /^foo/.test(v)} defaultValue="foo">Must start with "foo"</Input>
-      <Input name="bar" validate={v => /bar$/.test(v)}>Must end with "bar"</Input>
-      <Input name="any">Anything goes</Input>
-      <button type="submit">Submit</button>
+export default function App() {
+  return <div className={ styles.app }>
+    <Form name='form-example' action='.'>
+      <Input name='foo' validate={ v => /^foo/.test(v) } defaultValue='foo'>
+        Must start with &quot;foo&quot;
+      </Input>
+      <Input name='bar' validate={ v => /bar$/.test(v) }>
+        Must end with &quot;bar&quot;
+      </Input>
+      <Input name='any'>Anything goes</Input>
+      <button type='submit'>Submit</button>
     </Form>
   </div>;
 }
 
-function renderApp(elem, done) {
-  render(<App />, elem, done);
-}
-
-const bundleLoadedEvent = new Event('appBundleLoaded');
-bundleLoadedEvent.renderApp = renderApp;
-window.dispatchEvent(bundleLoadedEvent);
-
diff --git a/demo/src/app.less b/demo/src/app.less
index 19be49f..3457676 100644
--- a/demo/src/app.less
+++ b/demo/src/app.less
@@ -10,6 +10,7 @@
   display: flex;
   min-height: 100vh;
   max-width: 800px;
+  margin: 8px;
   font-size: 16px;
   line-height: 1.4;
   flex-flow: column;
diff --git a/demo/src/form.js b/demo/src/form.js
index e23c993..f32b2c4 100644
--- a/demo/src/form.js
+++ b/demo/src/form.js
@@ -1,51 +1,63 @@
 import React from 'react';
+import { string, func, node } from 'prop-types';
 import classNames from 'classnames';
 import { Validate } from 'react-validation-context';
 
 import styles from './form.less';
 
 export default class Form extends React.Component {
-  constructor () {
+  constructor() {
     super(...arguments);
 
     // The form is initially valid
     this.state = { validates: true };
+
+    this.onValidChange = this.onValidChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
   }
 
-  render () {
-    const { onValidChange: origOnValidChange, onSubmit: origOnSubmit, children, name, className, ...rest } = this.props;
-    const { validates } = this.state;
+  // Wrap the onValidChange handler to set this.state.validates
+  onValidChange(name, isValid, wasValid) {
+    const { onValidChange } = this.props;
+    if (onValidChange) {
+      onValidChange(name, isValid, wasValid);
+    }
 
-    // The form is invalid if there are any invalid items in its validation context
-    const validate = valids => Object.keys(valids).every(k => valids[k] !== false);
+    this.setState({ validates: isValid });
+  }
 
-    // Wrap the onValidChange handler to set this.state.validates
-    const onValidChange = (name, isValid, wasValid) => {
-      if (origOnValidChange) {
-        origOnValidChange(name, isValid, wasValid);
-      }
+  // Wrap the onSubmit handler to prevent submission if the form is invalid
+  onSubmit(e) {
+    const { onSubmit } = this.props;
+    if (onSubmit) {
+      onSubmit(e);
+    }
 
-      this.setState({ validates: isValid });
+    if (!this.state.validates) {
+      e.preventDefault();
     }
+  }
 
-    // Wrap the onSubmit handler to prevent submission if the form is invalid
-    const onSubmit = e => {
-      if (origOnSubmit) {
-        origOnSubmit(e);
-      }
+  // The form is invalid if there are any invalid items in its validation context
+  validate(valids) {
+    return Object.keys(valids).every(k => valids[k] !== false);
+  }
 
-      if (!this.state.validates) {
-        e.preventDefault();
-      }
-    }
+  render() {
+    const { onSubmit, onValidChange, validate } = this;
+    const { children, name, className, ...formProps } = this.props;
+    const { validates } = this.state;
 
     const classes = classNames(className, styles.form, {
       [styles.invalid]: validates === false
     });
 
+    // Set up `form` props
+    Object.assign(formProps, { onSubmit, name, className: classes });
+
     // Render `form` and create validation context `Validate` (which is also validation context-aware)
-    return <Validate validate={validate} onValidChange={onValidChange} name={name}>
-      <form onSubmit={onSubmit} name={name} className={classes} {...rest}>
+    return <Validate validate={ validate } onValidChange={ onValidChange } name={ name }>
+      <form { ...formProps }>
         {children}
       </form>
     </Validate>;
@@ -53,10 +65,10 @@ export default class Form extends React.Component {
 }
 
 Form.propTypes = {
-  name: React.PropTypes.string.isRequired, // Form identifier name
-  className: React.PropTypes.string, // CSS class name
-  onSubmit: React.PropTypes.func, // onSubmit handler for form
-  onValidChange: React.PropTypes.func, // validity change handler
-  children: React.PropTypes.node // React children
+  name: string.isRequired, // Form identifier name
+  className: string, // CSS class name
+  onSubmit: func, // onSubmit handler for form
+  onValidChange: func, // validity change handler
+  children: node // React children
 };
 
diff --git a/demo/src/index.js b/demo/src/index.js
index dfe9bef..db53aa8 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -1,11 +1,29 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
+import App from './app';
+
 const appDiv = document.createElement('div');
 appDiv.id = 'app';
+document.body.appendChild(appDiv);
+
+/**
+ * Starts the app by rendering it into the page.
+ */
+function start() {
+  render(<AppContainer>
+    <App />
+  </AppContainer>, appDiv);
+}
+
+start();
 
-window.addEventListener('appBundleLoaded', function onAppBundleLoaded(event) {
-  event.renderApp(appDiv, function onAppRender() {
-    document.body.appendChild(appDiv);
-  });
+if (module.hot) {
+  module.hot.accept('./app', start);
 
-  window.removeEventListener('appBundleLoaded', onAppBundleLoaded);
-});
+  module.hot.dispose(() =>
+    document.body.removeChild(appDiv)
+  );
+}
 
diff --git a/demo/src/input.js b/demo/src/input.js
index da4009d..4903e6b 100644
--- a/demo/src/input.js
+++ b/demo/src/input.js
@@ -1,33 +1,39 @@
 import React from 'react';
+import { string, func, node } from 'prop-types';
 import classNames from 'classnames';
 import { Validates } from 'react-validation-context';
 
 import styles from './input.less';
 
 export default class Input extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(...arguments);
 
     // Set up the initial state based on whether the initial value validates
     const { validate, value, defaultValue } = props;
-    this.state = { validates: validate(value || defaultValue) };
+    const validates = validate(value || defaultValue);
+    this.state = { validates };
+
+    this.onChange = this.onChange.bind(this);
   }
 
-  render () {
-    const { onChange: origOnChange, onValidChange, name, className, children, ...rest } = this.props;
-    const { validates } = this.state;
+  // Wrap the onChange handler to update `this.state.validates`
+  onChange(e) {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(e);
+    }
 
-    // Don't pass down validate function to <input>
-    delete rest.validate;
+    const validates = this.props.validate(e.target.value);
+    this.setState({ validates });
+  }
 
-    // Wrap the onChange handler to update `this.state.validates`
-    const onChange = (e) => {
-      if (origOnChange) {
-        origOnChange(e);
-      }
+  render() {
+    const { onChange } = this;
+    const { onValidChange, name, className, children, validate, ...inputProps } = this.props;
+    void validate; // needs to be destructured to avoid inclusion in `inputProps`
+    const { validates } = this.state;
 
-      this.setState({ validates: this.props.validate(e.target.value) });
-    };
 
     const labelClasses = classNames(styles.label, {
       [styles.invalid]: validates === false
@@ -35,11 +41,14 @@ export default class Input extends React.Component {
 
     const inputClasses = classNames(className, styles.input);
 
+    // Set up `input` props
+    Object.assign(inputProps, { onChange, name, className: inputClasses });
+
     // Render `input` and validation context-aware `Validates`
-    return <Validates validates={validates} onValidChange={onValidChange} name={name}>
-      <label className={labelClasses}>
-        <input type="text" onChange={onChange} name={name} className={inputClasses} {...rest} />
-        <span className={styles.children}>
+    return <Validates validates={ validates } onValidChange={ onValidChange } name={ name }>
+      <label className={ labelClasses }>
+        <input type='text' { ...inputProps } />
+        <span className={ styles.children }>
           {children}
         </span>
       </label>
@@ -48,14 +57,14 @@ export default class Input extends React.Component {
 }
 
 Input.propTypes = {
-  name: React.PropTypes.string.isRequired, // Input identifier name
-  className: React.PropTypes.string, // CSS class name
-  validate: React.PropTypes.func, // Validation function. Must return `true`, `false`, or `null`
-  value: React.PropTypes.string, // Input value
-  defaultValue: React.PropTypes.string, // Default input value
-  onChange: React.PropTypes.func, // onChange handler for input
-  onValidChange: React.PropTypes.func, // validity change handler
-  children: React.PropTypes.node // React children
+  name: string.isRequired, // Input identifier name
+  className: string, // CSS class name
+  validate: func, // Validation function. Must return `true`, `false`, or `null`
+  value: string, // Input value
+  defaultValue: string, // Default input value
+  onChange: func, // onChange handler for input
+  onValidChange: func, // validity change handler
+  children: node // React children
 };
 
 Input.defaultProps = {
diff --git a/demo/webpack.config.base.js b/demo/webpack.config.base.js
index def92cf..5e24de1 100644
--- a/demo/webpack.config.base.js
+++ b/demo/webpack.config.base.js
@@ -1,73 +1,78 @@
-/* eslint-env node */
-
 const path = require('path');
-const autoprefixer = require('autoprefixer');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const ctxDir = path.resolve(__dirname);
-const srcDir = path.resolve(__dirname, 'src');
-const outDir = path.resolve(__dirname, 'dist');
+const srcDir = path.resolve(ctxDir, 'src');
+const outDir = path.resolve(ctxDir, 'dist');
+const publicPath = '/';
 
 module.exports = {
   devtool: 'cheap-module-source-map',
-  debug: true,
   context: ctxDir,
   entry: {
-    main: [srcDir],
-    app: [path.resolve(srcDir, 'app')]
+    main: ['normalize.css', srcDir],
+    lib: [
+      'babel-polyfill', 'react', 'react-dom'
+    ]
   },
   output: {
     path: outDir,
-    publicPath: '/',
-    filename: '[name].[hash].bundle.js',
-    chunkFilename: '[name].[hash].chunk.js'
+    publicPath,
+    filename: '[name].[chunkhash].js'
   },
   resolve: {
-    root: [srcDir],
-    extensions: ['', '.js'],
-    modulesDirectories: ['node_modules'],
-    fallback: [path.resolve(ctxDir, 'node_modules')]
-  },
-  resolveLoader: {
-    root: path.resolve(ctxDir, 'node_modules')
+    alias: {
+      'react-validation-context': path.resolve(__dirname, '..'),
+      'src': srcDir
+    }
   },
-  postcss: () => [autoprefixer],
   module: {
-    loaders: [{
+    rules: [{
       test: /\.css$/,
-      loaders: [
-        'style',
-        'css'
-        + '?modules'
-        + '&localIdentName=[local]-[hash:base64:5]'
-        + '&importLoaders=1',
-        'postcss'
-      ]
+      include: [/node_modules/],
+      use: [{
+        loader: 'style-loader'
+      }, {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true,
+          importLoaders: 1
+        }
+      }]
     }, {
       test: /\.less$/,
-      loaders: [
-        'style',
-        'css'
-        + '?modules'
-        + '&localIdentName=[local]-[hash:base64:5]'
-        + '&importLoaders=2',
-        'postcss',
-        'less'
-      ]
+      include: [srcDir],
+      use: [{
+        loader: 'style-loader'
+      }, {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true,
+          modules: true,
+          localIdentName: '[local]-[hash:base64:5]',
+          importLoaders: 2
+        }
+      }, {
+        loader: 'less-loader',
+        options: {
+          sourceMap: true
+        }
+      }]
     }, {
       test: /\.js$/,
       exclude: /node_modules/,
-      loaders: ['babel']
-    }, {
-      test: /\.(eot|woff|ttf|svg|jpg|png|ico)$/,
-      loader: 'url?limit=10000&name=[path][name].[hash:base64:5].[ext]'
+      use: [{
+        loader: 'babel-loader'
+      }]
     }]
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin('commons.[hash].js'),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['lib', 'manifest']
+    }),
     new HtmlWebpackPlugin({
-      template: path.resolve(srcDir, 'index.html')
+      template: 'src/index.html'
     })
   ]
 };
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 584538a..90320c5 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -1,22 +1,36 @@
-/* eslint-env node */
-
 const config = require('./webpack.config.base.js');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 if (!config.module) {
   config.module = {};
 }
 
-if (!config.module.preLoaders) {
-  config.module.preLoaders = [];
+if (!config.module.rules) {
+  config.module.rules = [];
 }
 
-config.module.preLoaders.push(
+config.module.rules.push(
   {
     test: /\.js$/,
+    enforce: 'pre',
     exclude: /node_modules/,
-    loader: 'eslint'
+    use: ['eslint-loader']
   }
 );
 
+if (!config.performance) {
+  config.performance = {};
+}
+
+config.performance.hints = false;
+
+if (!config.plugins) {
+  config.plugins = [];
+}
+
+config.plugins.push(
+  new CleanWebpackPlugin(['dist'], { verbose: true })
+);
+
 module.exports = config;
 
diff --git a/demo/webpack.config.live.js b/demo/webpack.config.live.js
new file mode 100644
index 0000000..b3f3017
--- /dev/null
+++ b/demo/webpack.config.live.js
@@ -0,0 +1,18 @@
+const webpack = require('webpack');
+const config = require('./webpack.config.js');
+
+config.output.filename = '[name].js';
+
+config.entry.main.unshift(
+  'react-hot-loader/patch',
+  'webpack-dev-server/client?http://localhost:8080/',
+  'webpack/hot/dev-server'
+);
+
+config.plugins.push(
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NamedModulesPlugin()
+);
+
+module.exports = config;
+
diff --git a/demo/webpack.config.production.js b/demo/webpack.config.production.js
deleted file mode 100644
index 46c5f8e..0000000
--- a/demo/webpack.config.production.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-env node */
-
-const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-
-const config = require('./webpack.config.base.js');
-
-config.debug = false;
-
-if (!config.module) {
-  config.module = {};
-}
-
-// Use ExtractTextPlugin on any loader that uses style-loader
-if (config.module.loaders) {
-  config.module.loaders.forEach(function extract(l) {
-    if (l.loader === 'style') {
-      l.loader = ExtractTextPlugin.extract('style');
-      delete l.loaders;
-    } else if (l.loaders && l.loaders[0] === 'style')  {
-      l.loader = ExtractTextPlugin.extract('style', l.loaders.slice(1));
-      delete l.loaders;
-    }
-  });
-}
-
-if (!config.resolve) {
-  config.resolve = {};
-}
-
-if (!config.resolve.alias) {
-  config.resolve.alias = {}
-}
-
-config.resolve.alias['react'] = 'react-lite';
-config.resolve.alias['react-dom'] = 'react-lite';
-
-if (!config.plugins) {
-  config.plugins = [];
-}
-
-config.plugins.unshift(
-  new CleanWebpackPlugin(['dist']),
-  new webpack.optimize.UglifyJsPlugin(),
-  new webpack.optimize.OccurrenceOrderPlugin(),
-  new webpack.optimize.DedupePlugin(),
-  new webpack.DefinePlugin({
-    'process.env': {
-      'NODE_ENV': JSON.stringify('production')
-    }
-  }),
-  new ExtractTextPlugin('[name].[hash].css', {allChunks: true})
-);
-
-module.exports = config;
-
diff --git a/package.json b/package.json
index ee6bff8..c6bbf57 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,13 @@
     "test"
   ],
   "nyc": {
-    "require": ["babel-register"],
-    "reporter": ["text", "html"]
+    "require": [
+      "babel-register"
+    ],
+    "reporter": [
+      "text",
+      "html"
+    ]
   },
   "scripts": {
     "build": "babel *.js -d lib",