react-final-form - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/react-final-form.cjs.js

@@ -19,2 +19,18 @@ 'use strict';
 
+//      
+var diffSubscription = function (a, b, keys) {
+  if (a) {
+    if (b) {
+      // $FlowFixMe
+      return keys.some(function (key) {
+        return a[key] !== b[key];
+      });
+    } else {
+      return true;
+    }
+  } else {
+    return !!b;
+  }
+};
+
 var classCallCheck = function (instance, Constructor) {
@@ -133,120 +149,2 @@ if (!(instance instanceof Constructor)) {
 //      
-var version$1 = '0.0.2';
-
-var all = finalForm.formSubscriptionItems.reduce(function (result, key) {
-  result[key] = true;
-  return result;
-}, {});
-
-var ReactFinalForm = function (_React$PureComponent) {
-  inherits(ReactFinalForm, _React$PureComponent);
-
-  function ReactFinalForm(props) {
-    classCallCheck(this, ReactFinalForm);
-
-    var _this = possibleConstructorReturn(this, (ReactFinalForm.__proto__ || Object.getPrototypeOf(ReactFinalForm)).call(this, props));
-
-    _this.notify = function (state) {
-      return _this.setState({ state: state });
-    };
-
-    _this.handleSubmit = function (event) {
-      event.preventDefault();
-      _this.form.submit();
-    };
-
-    var children = props.children,
-        component = props.component,
-        debug = props.debug,
-        initialValues = props.initialValues,
-        onSubmit = props.onSubmit,
-        render = props.render,
-        validate = props.validate,
-        subscription = props.subscription;
-
-    warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
-    var config = {
-      debug: debug,
-      initialValues: initialValues,
-      onSubmit: onSubmit,
-      validate: validate
-    };
-    try {
-      _this.form = finalForm.createForm(config);
-    } catch (e) {
-      warning(false, e.message);
-    }
-    var initialState = void 0;
-    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
-      if (initialState) {
-        _this.notify(state);
-      } else {
-        initialState = state;
-      }
-    }, subscription || all);
-    _this.state = { state: initialState };
-    return _this;
-  }
-
-  createClass(ReactFinalForm, [{
-    key: 'getChildContext',
-    value: function getChildContext() {
-      return {
-        reactFinalForm: {
-          registerField: this.form && this.form.registerField // no need to bind because FF does not use "this"
-        }
-      };
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unsubscribe();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      // remove config props
-      var _props = this.props,
-          debug = _props.debug,
-          initialValues = _props.initialValues,
-          onSubmit = _props.onSubmit,
-          subscription = _props.subscription,
-          validate = _props.validate,
-          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'onSubmit', 'subscription', 'validate']);
-
-      return renderComponent(_extends({}, props, this.state.state, {
-        batch: this.form && this.form.batch,
-        blur: this.form && this.form.blur,
-        change: this.form && this.form.change,
-        focus: this.form && this.form.focus,
-        handleSubmit: this.handleSubmit,
-        reset: this.form && this.form.reset
-      }), 'ReactFinalForm');
-    }
-  }]);
-  return ReactFinalForm;
-}(React.PureComponent);
-
-ReactFinalForm.childContextTypes = {
-  reactFinalForm: PropTypes.object
-};
-ReactFinalForm.displayName = 'ReactFinalForm(' + finalForm.version + ')(' + version$1 + ')';
-
-//      
-var diffSubscription = function (a, b, keys) {
-  if (a) {
-    if (b) {
-      // $FlowFixMe
-      return keys.some(function (key) {
-        return a[key] !== b[key];
-      });
-    } else {
-      return true;
-    }
-  } else {
-    return !!b;
-  }
-};
-
-//      
 var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';
@@ -292,3 +190,3 @@
 //      
-var all$1 = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
+var all = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
   result[key] = true;
@@ -310,3 +208,3 @@ return result;
 
-      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all$1, _this.validate);
+      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, _this.validate);
     };
@@ -319,3 +217,3 @@
     _this.notify = function (state) {
-      return _this.setState(state);
+      return _this.setState({ state: state });
     };
@@ -325,10 +223,10 @@
       onBlur: function onBlur(event) {
-        _this.state.blur();
+        _this.state.state.blur();
       },
       onChange: function onChange(event) {
         var value = event && event.target ? getValue(event, isReactNative) : event;
-        _this.state.change(value === '' ? undefined : value);
+        _this.state.state.change(value === '' ? undefined : value);
       },
       onFocus: function onFocus(event) {
-        _this.state.focus();
+        _this.state.state.focus();
       }
@@ -338,3 +236,3 @@ };
     var initialState = void 0;
-    warning(context.reactFinalForm, 'Field must be used inside of a Form component');
+    warning(context.reactFinalForm, 'Field must be used inside of a ReactFinalForm component');
     if (_this.context.reactFinalForm) {
@@ -350,3 +248,3 @@ // avoid error, warning will alert developer to their mistake
     }
-    _this.state = initialState || {};
+    _this.state = { state: initialState || {} };
     return _this;
@@ -384,8 +282,8 @@ }
           rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'value']);
-      var _state = this.state,
-          blur = _state.blur,
-          change = _state.change,
-          focus = _state.focus,
-          value = _state.value,
-          meta = objectWithoutProperties(_state, ['blur', 'change', 'focus', 'value']);
+      var _state$state = this.state.state,
+          blur = _state$state.blur,
+          change = _state$state.change,
+          focus = _state$state.focus,
+          value = _state$state.value,
+          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value']);
 
@@ -420,6 +318,177 @@ if (value === undefined || value === null && !allowNull) {
 
+//      
+var version$1 = '0.0.6';
+
+var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
+  result[key] = true;
+  return result;
+}, {});
+
+var ReactFinalForm = function (_React$PureComponent) {
+  inherits(ReactFinalForm, _React$PureComponent);
+
+  function ReactFinalForm(props) {
+    classCallCheck(this, ReactFinalForm);
+
+    var _this = possibleConstructorReturn(this, (ReactFinalForm.__proto__ || Object.getPrototypeOf(ReactFinalForm)).call(this, props));
+
+    _this.notify = function (state) {
+      return _this.setState({ state: state });
+    };
+
+    _this.handleSubmit = function (event) {
+      event.preventDefault();
+      _this.form.submit();
+    };
+
+    var children = props.children,
+        component = props.component,
+        debug = props.debug,
+        initialValues = props.initialValues,
+        onSubmit = props.onSubmit,
+        render = props.render,
+        validate = props.validate,
+        subscription = props.subscription;
+
+    warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
+    var config = {
+      debug: debug,
+      initialValues: initialValues,
+      onSubmit: onSubmit,
+      validate: validate
+    };
+    try {
+      _this.form = finalForm.createForm(config);
+    } catch (e) {
+      warning(false, e.message);
+    }
+    var initialState = void 0;
+    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
+      if (initialState) {
+        _this.notify(state);
+      } else {
+        initialState = state;
+      }
+    }, subscription || all$1);
+    _this.state = { state: initialState };
+    return _this;
+  }
+
+  createClass(ReactFinalForm, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        reactFinalForm: this.form
+      };
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unsubscribe();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      // remove config props
+      var _props = this.props,
+          debug = _props.debug,
+          initialValues = _props.initialValues,
+          onSubmit = _props.onSubmit,
+          subscription = _props.subscription,
+          validate = _props.validate,
+          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'onSubmit', 'subscription', 'validate']);
+
+      return renderComponent(_extends({}, props, this.state.state, {
+        batch: this.form && this.form.batch,
+        blur: this.form && this.form.blur,
+        change: this.form && this.form.change,
+        focus: this.form && this.form.focus,
+        handleSubmit: this.handleSubmit,
+        reset: this.form && this.form.reset
+      }), 'ReactFinalForm');
+    }
+  }]);
+  return ReactFinalForm;
+}(React.PureComponent);
+
+ReactFinalForm.childContextTypes = {
+  reactFinalForm: PropTypes.object
+};
+ReactFinalForm.displayName = 'ReactFinalForm(' + finalForm.version + ')(' + version$1 + ')';
+
+//      
+var FormSpy = function (_React$PureComponent) {
+  inherits(FormSpy, _React$PureComponent);
+
+  function FormSpy(props, context) {
+    classCallCheck(this, FormSpy);
+
+    var _this = possibleConstructorReturn(this, (FormSpy.__proto__ || Object.getPrototypeOf(FormSpy)).call(this, props, context));
+
+    _this.subscribe = function (_ref, listener) {
+      var subscription = _ref.subscription;
+
+      _this.unsubscribe = _this.context.reactFinalForm.subscribe(listener, subscription || all$1);
+    };
+
+    _this.notify = function (state) {
+      return _this.setState({ state: state });
+    };
+
+    var initialState = void 0;
+    warning(context.reactFinalForm, 'FormSpy must be used inside of a ReactFinalForm component');
+    if (_this.context.reactFinalForm) {
+      // avoid error, warning will alert developer to their mistake
+      _this.subscribe(props, function (state) {
+        if (initialState) {
+          _this.notify(state);
+        } else {
+          initialState = state;
+        }
+      });
+    }
+    _this.state = { state: initialState };
+    return _this;
+  }
+
+  createClass(FormSpy, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var subscription = nextProps.subscription;
+
+      if (diffSubscription(this.props.subscription, subscription, finalForm.formSubscriptionItems)) {
+        if (this.context.reactFinalForm) {
+          // avoid error, warning will alert developer to their mistake
+          this.unsubscribe();
+          this.subscribe(nextProps, this.notify);
+        }
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unsubscribe();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          subscription = _props.subscription,
+          rest = objectWithoutProperties(_props, ['subscription']);
+
+      return renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+    }
+  }]);
+  return FormSpy;
+}(React.PureComponent);
+
+FormSpy.contextTypes = {
+  reactFinalForm: PropTypes.object
+};
+
 //
 
+exports.Field = Field;
 exports.Form = ReactFinalForm;
 exports.version = version$1;
-exports.Field = Field;
+exports.FormSpy = FormSpy;

dist/react-final-form.es.js

@@ -13,2 +13,18 @@ import { PureComponent, createElement } from 'react';
 
+//      
+var diffSubscription = function (a, b, keys) {
+  if (a) {
+    if (b) {
+      // $FlowFixMe
+      return keys.some(function (key) {
+        return a[key] !== b[key];
+      });
+    } else {
+      return true;
+    }
+  } else {
+    return !!b;
+  }
+};
+
 var classCallCheck = function (instance, Constructor) {
@@ -127,120 +143,2 @@ if (!(instance instanceof Constructor)) {
 //      
-var version$1 = '0.0.2';
-
-var all = formSubscriptionItems.reduce(function (result, key) {
-  result[key] = true;
-  return result;
-}, {});
-
-var ReactFinalForm = function (_React$PureComponent) {
-  inherits(ReactFinalForm, _React$PureComponent);
-
-  function ReactFinalForm(props) {
-    classCallCheck(this, ReactFinalForm);
-
-    var _this = possibleConstructorReturn(this, (ReactFinalForm.__proto__ || Object.getPrototypeOf(ReactFinalForm)).call(this, props));
-
-    _this.notify = function (state) {
-      return _this.setState({ state: state });
-    };
-
-    _this.handleSubmit = function (event) {
-      event.preventDefault();
-      _this.form.submit();
-    };
-
-    var children = props.children,
-        component = props.component,
-        debug = props.debug,
-        initialValues = props.initialValues,
-        onSubmit = props.onSubmit,
-        render = props.render,
-        validate = props.validate,
-        subscription = props.subscription;
-
-    warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
-    var config = {
-      debug: debug,
-      initialValues: initialValues,
-      onSubmit: onSubmit,
-      validate: validate
-    };
-    try {
-      _this.form = createForm(config);
-    } catch (e) {
-      warning(false, e.message);
-    }
-    var initialState = void 0;
-    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
-      if (initialState) {
-        _this.notify(state);
-      } else {
-        initialState = state;
-      }
-    }, subscription || all);
-    _this.state = { state: initialState };
-    return _this;
-  }
-
-  createClass(ReactFinalForm, [{
-    key: 'getChildContext',
-    value: function getChildContext() {
-      return {
-        reactFinalForm: {
-          registerField: this.form && this.form.registerField // no need to bind because FF does not use "this"
-        }
-      };
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unsubscribe();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      // remove config props
-      var _props = this.props,
-          debug = _props.debug,
-          initialValues = _props.initialValues,
-          onSubmit = _props.onSubmit,
-          subscription = _props.subscription,
-          validate = _props.validate,
-          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'onSubmit', 'subscription', 'validate']);
-
-      return renderComponent(_extends({}, props, this.state.state, {
-        batch: this.form && this.form.batch,
-        blur: this.form && this.form.blur,
-        change: this.form && this.form.change,
-        focus: this.form && this.form.focus,
-        handleSubmit: this.handleSubmit,
-        reset: this.form && this.form.reset
-      }), 'ReactFinalForm');
-    }
-  }]);
-  return ReactFinalForm;
-}(PureComponent);
-
-ReactFinalForm.childContextTypes = {
-  reactFinalForm: PropTypes.object
-};
-ReactFinalForm.displayName = 'ReactFinalForm(' + version + ')(' + version$1 + ')';
-
-//      
-var diffSubscription = function (a, b, keys) {
-  if (a) {
-    if (b) {
-      // $FlowFixMe
-      return keys.some(function (key) {
-        return a[key] !== b[key];
-      });
-    } else {
-      return true;
-    }
-  } else {
-    return !!b;
-  }
-};
-
-//      
 var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';
@@ -286,3 +184,3 @@
 //      
-var all$1 = fieldSubscriptionItems.reduce(function (result, key) {
+var all = fieldSubscriptionItems.reduce(function (result, key) {
   result[key] = true;
@@ -304,3 +202,3 @@ return result;
 
-      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all$1, _this.validate);
+      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, _this.validate);
     };
@@ -313,3 +211,3 @@
     _this.notify = function (state) {
-      return _this.setState(state);
+      return _this.setState({ state: state });
     };
@@ -319,10 +217,10 @@
       onBlur: function onBlur(event) {
-        _this.state.blur();
+        _this.state.state.blur();
       },
       onChange: function onChange(event) {
         var value = event && event.target ? getValue(event, isReactNative) : event;
-        _this.state.change(value === '' ? undefined : value);
+        _this.state.state.change(value === '' ? undefined : value);
       },
       onFocus: function onFocus(event) {
-        _this.state.focus();
+        _this.state.state.focus();
       }
@@ -332,3 +230,3 @@ };
     var initialState = void 0;
-    warning(context.reactFinalForm, 'Field must be used inside of a Form component');
+    warning(context.reactFinalForm, 'Field must be used inside of a ReactFinalForm component');
     if (_this.context.reactFinalForm) {
@@ -344,3 +242,3 @@ // avoid error, warning will alert developer to their mistake
     }
-    _this.state = initialState || {};
+    _this.state = { state: initialState || {} };
     return _this;
@@ -378,8 +276,8 @@ }
           rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'value']);
-      var _state = this.state,
-          blur = _state.blur,
-          change = _state.change,
-          focus = _state.focus,
-          value = _state.value,
-          meta = objectWithoutProperties(_state, ['blur', 'change', 'focus', 'value']);
+      var _state$state = this.state.state,
+          blur = _state$state.blur,
+          change = _state$state.change,
+          focus = _state$state.focus,
+          value = _state$state.value,
+          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value']);
 
@@ -414,4 +312,174 @@ if (value === undefined || value === null && !allowNull) {
 
+//      
+var version$1 = '0.0.6';
+
+var all$1 = formSubscriptionItems.reduce(function (result, key) {
+  result[key] = true;
+  return result;
+}, {});
+
+var ReactFinalForm = function (_React$PureComponent) {
+  inherits(ReactFinalForm, _React$PureComponent);
+
+  function ReactFinalForm(props) {
+    classCallCheck(this, ReactFinalForm);
+
+    var _this = possibleConstructorReturn(this, (ReactFinalForm.__proto__ || Object.getPrototypeOf(ReactFinalForm)).call(this, props));
+
+    _this.notify = function (state) {
+      return _this.setState({ state: state });
+    };
+
+    _this.handleSubmit = function (event) {
+      event.preventDefault();
+      _this.form.submit();
+    };
+
+    var children = props.children,
+        component = props.component,
+        debug = props.debug,
+        initialValues = props.initialValues,
+        onSubmit = props.onSubmit,
+        render = props.render,
+        validate = props.validate,
+        subscription = props.subscription;
+
+    warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
+    var config = {
+      debug: debug,
+      initialValues: initialValues,
+      onSubmit: onSubmit,
+      validate: validate
+    };
+    try {
+      _this.form = createForm(config);
+    } catch (e) {
+      warning(false, e.message);
+    }
+    var initialState = void 0;
+    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
+      if (initialState) {
+        _this.notify(state);
+      } else {
+        initialState = state;
+      }
+    }, subscription || all$1);
+    _this.state = { state: initialState };
+    return _this;
+  }
+
+  createClass(ReactFinalForm, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        reactFinalForm: this.form
+      };
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unsubscribe();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      // remove config props
+      var _props = this.props,
+          debug = _props.debug,
+          initialValues = _props.initialValues,
+          onSubmit = _props.onSubmit,
+          subscription = _props.subscription,
+          validate = _props.validate,
+          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'onSubmit', 'subscription', 'validate']);
+
+      return renderComponent(_extends({}, props, this.state.state, {
+        batch: this.form && this.form.batch,
+        blur: this.form && this.form.blur,
+        change: this.form && this.form.change,
+        focus: this.form && this.form.focus,
+        handleSubmit: this.handleSubmit,
+        reset: this.form && this.form.reset
+      }), 'ReactFinalForm');
+    }
+  }]);
+  return ReactFinalForm;
+}(PureComponent);
+
+ReactFinalForm.childContextTypes = {
+  reactFinalForm: PropTypes.object
+};
+ReactFinalForm.displayName = 'ReactFinalForm(' + version + ')(' + version$1 + ')';
+
+//      
+var FormSpy = function (_React$PureComponent) {
+  inherits(FormSpy, _React$PureComponent);
+
+  function FormSpy(props, context) {
+    classCallCheck(this, FormSpy);
+
+    var _this = possibleConstructorReturn(this, (FormSpy.__proto__ || Object.getPrototypeOf(FormSpy)).call(this, props, context));
+
+    _this.subscribe = function (_ref, listener) {
+      var subscription = _ref.subscription;
+
+      _this.unsubscribe = _this.context.reactFinalForm.subscribe(listener, subscription || all$1);
+    };
+
+    _this.notify = function (state) {
+      return _this.setState({ state: state });
+    };
+
+    var initialState = void 0;
+    warning(context.reactFinalForm, 'FormSpy must be used inside of a ReactFinalForm component');
+    if (_this.context.reactFinalForm) {
+      // avoid error, warning will alert developer to their mistake
+      _this.subscribe(props, function (state) {
+        if (initialState) {
+          _this.notify(state);
+        } else {
+          initialState = state;
+        }
+      });
+    }
+    _this.state = { state: initialState };
+    return _this;
+  }
+
+  createClass(FormSpy, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var subscription = nextProps.subscription;
+
+      if (diffSubscription(this.props.subscription, subscription, formSubscriptionItems)) {
+        if (this.context.reactFinalForm) {
+          // avoid error, warning will alert developer to their mistake
+          this.unsubscribe();
+          this.subscribe(nextProps, this.notify);
+        }
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unsubscribe();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          subscription = _props.subscription,
+          rest = objectWithoutProperties(_props, ['subscription']);
+
+      return renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+    }
+  }]);
+  return FormSpy;
+}(PureComponent);
+
+FormSpy.contextTypes = {
+  reactFinalForm: PropTypes.object
+};
+
 //
 
-export { ReactFinalForm as Form, version$1 as version, Field };
+export { Field, ReactFinalForm as Form, version$1 as version, FormSpy };

dist/react-final-form.umd.js

@@ -16,2 +16,18 @@ (function (global, factory) {
 
+//      
+var diffSubscription = function (a, b, keys) {
+  if (a) {
+    if (b) {
+      // $FlowFixMe
+      return keys.some(function (key) {
+        return a[key] !== b[key];
+      });
+    } else {
+      return true;
+    }
+  } else {
+    return !!b;
+  }
+};
+
 var classCallCheck = function (instance, Constructor) {
@@ -130,120 +146,2 @@ if (!(instance instanceof Constructor)) {
 //      
-var version$1 = '0.0.2';
-
-var all = finalForm.formSubscriptionItems.reduce(function (result, key) {
-  result[key] = true;
-  return result;
-}, {});
-
-var ReactFinalForm = function (_React$PureComponent) {
-  inherits(ReactFinalForm, _React$PureComponent);
-
-  function ReactFinalForm(props) {
-    classCallCheck(this, ReactFinalForm);
-
-    var _this = possibleConstructorReturn(this, (ReactFinalForm.__proto__ || Object.getPrototypeOf(ReactFinalForm)).call(this, props));
-
-    _this.notify = function (state) {
-      return _this.setState({ state: state });
-    };
-
-    _this.handleSubmit = function (event) {
-      event.preventDefault();
-      _this.form.submit();
-    };
-
-    var children = props.children,
-        component = props.component,
-        debug = props.debug,
-        initialValues = props.initialValues,
-        onSubmit = props.onSubmit,
-        render = props.render,
-        validate = props.validate,
-        subscription = props.subscription;
-
-    warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
-    var config = {
-      debug: debug,
-      initialValues: initialValues,
-      onSubmit: onSubmit,
-      validate: validate
-    };
-    try {
-      _this.form = finalForm.createForm(config);
-    } catch (e) {
-      warning(false, e.message);
-    }
-    var initialState = void 0;
-    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
-      if (initialState) {
-        _this.notify(state);
-      } else {
-        initialState = state;
-      }
-    }, subscription || all);
-    _this.state = { state: initialState };
-    return _this;
-  }
-
-  createClass(ReactFinalForm, [{
-    key: 'getChildContext',
-    value: function getChildContext() {
-      return {
-        reactFinalForm: {
-          registerField: this.form && this.form.registerField // no need to bind because FF does not use "this"
-        }
-      };
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unsubscribe();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      // remove config props
-      var _props = this.props,
-          debug = _props.debug,
-          initialValues = _props.initialValues,
-          onSubmit = _props.onSubmit,
-          subscription = _props.subscription,
-          validate = _props.validate,
-          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'onSubmit', 'subscription', 'validate']);
-
-      return renderComponent(_extends({}, props, this.state.state, {
-        batch: this.form && this.form.batch,
-        blur: this.form && this.form.blur,
-        change: this.form && this.form.change,
-        focus: this.form && this.form.focus,
-        handleSubmit: this.handleSubmit,
-        reset: this.form && this.form.reset
-      }), 'ReactFinalForm');
-    }
-  }]);
-  return ReactFinalForm;
-}(React.PureComponent);
-
-ReactFinalForm.childContextTypes = {
-  reactFinalForm: PropTypes.object
-};
-ReactFinalForm.displayName = 'ReactFinalForm(' + finalForm.version + ')(' + version$1 + ')';
-
-//      
-var diffSubscription = function (a, b, keys) {
-  if (a) {
-    if (b) {
-      // $FlowFixMe
-      return keys.some(function (key) {
-        return a[key] !== b[key];
-      });
-    } else {
-      return true;
-    }
-  } else {
-    return !!b;
-  }
-};
-
-//      
 var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative';
@@ -289,3 +187,3 @@
 //      
-var all$1 = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
+var all = finalForm.fieldSubscriptionItems.reduce(function (result, key) {
   result[key] = true;
@@ -307,3 +205,3 @@ return result;
 
-      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all$1, _this.validate);
+      _this.unsubscribe = _this.context.reactFinalForm.registerField(name, listener, subscription || all, _this.validate);
     };
@@ -316,3 +214,3 @@
     _this.notify = function (state) {
-      return _this.setState(state);
+      return _this.setState({ state: state });
     };
@@ -322,10 +220,10 @@
       onBlur: function onBlur(event) {
-        _this.state.blur();
+        _this.state.state.blur();
       },
       onChange: function onChange(event) {
         var value = event && event.target ? getValue(event, isReactNative) : event;
-        _this.state.change(value === '' ? undefined : value);
+        _this.state.state.change(value === '' ? undefined : value);
       },
       onFocus: function onFocus(event) {
-        _this.state.focus();
+        _this.state.state.focus();
       }
@@ -335,3 +233,3 @@ };
     var initialState = void 0;
-    warning(context.reactFinalForm, 'Field must be used inside of a Form component');
+    warning(context.reactFinalForm, 'Field must be used inside of a ReactFinalForm component');
     if (_this.context.reactFinalForm) {
@@ -347,3 +245,3 @@ // avoid error, warning will alert developer to their mistake
     }
-    _this.state = initialState || {};
+    _this.state = { state: initialState || {} };
     return _this;
@@ -381,8 +279,8 @@ }
           rest = objectWithoutProperties(_props, ['name', 'component', 'children', 'allowNull', 'value']);
-      var _state = this.state,
-          blur = _state.blur,
-          change = _state.change,
-          focus = _state.focus,
-          value = _state.value,
-          meta = objectWithoutProperties(_state, ['blur', 'change', 'focus', 'value']);
+      var _state$state = this.state.state,
+          blur = _state$state.blur,
+          change = _state$state.change,
+          focus = _state$state.focus,
+          value = _state$state.value,
+          meta = objectWithoutProperties(_state$state, ['blur', 'change', 'focus', 'value']);
 
@@ -417,7 +315,178 @@ if (value === undefined || value === null && !allowNull) {
 
+//      
+var version$1 = '0.0.6';
+
+var all$1 = finalForm.formSubscriptionItems.reduce(function (result, key) {
+  result[key] = true;
+  return result;
+}, {});
+
+var ReactFinalForm = function (_React$PureComponent) {
+  inherits(ReactFinalForm, _React$PureComponent);
+
+  function ReactFinalForm(props) {
+    classCallCheck(this, ReactFinalForm);
+
+    var _this = possibleConstructorReturn(this, (ReactFinalForm.__proto__ || Object.getPrototypeOf(ReactFinalForm)).call(this, props));
+
+    _this.notify = function (state) {
+      return _this.setState({ state: state });
+    };
+
+    _this.handleSubmit = function (event) {
+      event.preventDefault();
+      _this.form.submit();
+    };
+
+    var children = props.children,
+        component = props.component,
+        debug = props.debug,
+        initialValues = props.initialValues,
+        onSubmit = props.onSubmit,
+        render = props.render,
+        validate = props.validate,
+        subscription = props.subscription;
+
+    warning(render || typeof children === 'function' || component, 'Must specify either a render prop, a render function as children, or a component prop');
+    var config = {
+      debug: debug,
+      initialValues: initialValues,
+      onSubmit: onSubmit,
+      validate: validate
+    };
+    try {
+      _this.form = finalForm.createForm(config);
+    } catch (e) {
+      warning(false, e.message);
+    }
+    var initialState = void 0;
+    _this.unsubscribe = _this.form && _this.form.subscribe(function (state) {
+      if (initialState) {
+        _this.notify(state);
+      } else {
+        initialState = state;
+      }
+    }, subscription || all$1);
+    _this.state = { state: initialState };
+    return _this;
+  }
+
+  createClass(ReactFinalForm, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        reactFinalForm: this.form
+      };
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unsubscribe();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      // remove config props
+      var _props = this.props,
+          debug = _props.debug,
+          initialValues = _props.initialValues,
+          onSubmit = _props.onSubmit,
+          subscription = _props.subscription,
+          validate = _props.validate,
+          props = objectWithoutProperties(_props, ['debug', 'initialValues', 'onSubmit', 'subscription', 'validate']);
+
+      return renderComponent(_extends({}, props, this.state.state, {
+        batch: this.form && this.form.batch,
+        blur: this.form && this.form.blur,
+        change: this.form && this.form.change,
+        focus: this.form && this.form.focus,
+        handleSubmit: this.handleSubmit,
+        reset: this.form && this.form.reset
+      }), 'ReactFinalForm');
+    }
+  }]);
+  return ReactFinalForm;
+}(React.PureComponent);
+
+ReactFinalForm.childContextTypes = {
+  reactFinalForm: PropTypes.object
+};
+ReactFinalForm.displayName = 'ReactFinalForm(' + finalForm.version + ')(' + version$1 + ')';
+
+//      
+var FormSpy = function (_React$PureComponent) {
+  inherits(FormSpy, _React$PureComponent);
+
+  function FormSpy(props, context) {
+    classCallCheck(this, FormSpy);
+
+    var _this = possibleConstructorReturn(this, (FormSpy.__proto__ || Object.getPrototypeOf(FormSpy)).call(this, props, context));
+
+    _this.subscribe = function (_ref, listener) {
+      var subscription = _ref.subscription;
+
+      _this.unsubscribe = _this.context.reactFinalForm.subscribe(listener, subscription || all$1);
+    };
+
+    _this.notify = function (state) {
+      return _this.setState({ state: state });
+    };
+
+    var initialState = void 0;
+    warning(context.reactFinalForm, 'FormSpy must be used inside of a ReactFinalForm component');
+    if (_this.context.reactFinalForm) {
+      // avoid error, warning will alert developer to their mistake
+      _this.subscribe(props, function (state) {
+        if (initialState) {
+          _this.notify(state);
+        } else {
+          initialState = state;
+        }
+      });
+    }
+    _this.state = { state: initialState };
+    return _this;
+  }
+
+  createClass(FormSpy, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var subscription = nextProps.subscription;
+
+      if (diffSubscription(this.props.subscription, subscription, finalForm.formSubscriptionItems)) {
+        if (this.context.reactFinalForm) {
+          // avoid error, warning will alert developer to their mistake
+          this.unsubscribe();
+          this.subscribe(nextProps, this.notify);
+        }
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unsubscribe();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          subscription = _props.subscription,
+          rest = objectWithoutProperties(_props, ['subscription']);
+
+      return renderComponent(_extends({}, rest, this.state.state), 'FormSpy');
+    }
+  }]);
+  return FormSpy;
+}(React.PureComponent);
+
+FormSpy.contextTypes = {
+  reactFinalForm: PropTypes.object
+};
+
 //
 
+exports.Field = Field;
 exports.Form = ReactFinalForm;
 exports.version = version$1;
-exports.Field = Field;
+exports.FormSpy = FormSpy;
 
@@ -424,0 +493,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/react-final-form.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],t):t(e["react-final-form"]={},e.React,e.PropTypes,e.FinalForm)}(this,function(e,t,n,r){"use strict";function o(e,n){var r=e.render,o=e.children,i=e.component,a=l(e,["render","children","component"]);return i?t.createElement(i,c({},a,{children:o})):r?r(c({},a,{children:o})):"function"!=typeof o?null:o(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(e,t){},a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},l=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},p=r.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{}),d=function(e){function t(e){a(this,t);var n=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));n.notify=function(e){return n.setState({state:e})},n.handleSubmit=function(e){e.preventDefault(),n.form.submit()};e.children,e.component;var o=e.debug,u=e.initialValues,c=e.onSubmit,s=(e.render,e.validate),l=e.subscription,d={debug:o,initialValues:u,onSubmit:c,validate:s};try{n.form=r.createForm(d)}catch(e){i(!1,e.message)}var h=void 0;return n.unsubscribe=n.form&&n.form.subscribe(function(e){h?n.notify(e):h=e},l||p),n.state={state:h},n}return s(t,e),u(t,[{key:"getChildContext",value:function(){return{reactFinalForm:{registerField:this.form&&this.form.registerField}}}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var e=this.props,t=(e.debug,e.initialValues,e.onSubmit,e.subscription,e.validate,l(e,["debug","initialValues","onSubmit","subscription","validate"]));return o(c({},t,this.state.state,{batch:this.form&&this.form.batch,blur:this.form&&this.form.blur,change:this.form&&this.form.change,focus:this.form&&this.form.focus,handleSubmit:this.handleSubmit,reset:this.form&&this.form.reset}))}}]),t}(t.PureComponent);d.childContextTypes={reactFinalForm:n.object},d.displayName="ReactFinalForm("+r.version+")(0.0.2)";var h="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,m=function(e,t){if(!t&&e.nativeEvent&&void 0!==e.nativeEvent.text)return e.nativeEvent.text;if(t&&e.nativeEvent)return e.nativeEvent.text;var n=e.target,r=n.type,o=n.value,i=n.checked;switch(r){case"checkbox":return!!i;case"select-multiple":return function(e){var t=[];if(e)for(var n=0;n<e.length;n++){var r=e[n];r.selected&&t.push(r.value)}return t}(e.target.options);default:return o}},b=r.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{}),v=function(e){function n(e,t){a(this,n);var r=f(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));r.subscribe=function(e,t){var n=e.name,o=e.subscription;r.unsubscribe=r.context.reactFinalForm.registerField(n,t,o||b,r.validate)},r.validate=function(e,t){return r.props.validate&&r.props.validate(e,t)},r.notify=function(e){return r.setState(e)},r.handlers={onBlur:function(e){r.state.blur()},onChange:function(e){var t=e&&e.target?m(e,h):e;r.state.change(""===t?void 0:t)},onFocus:function(e){r.state.focus()}};var o=void 0;return i(t.reactFinalForm,"Field must be used inside of a Form component"),r.context.reactFinalForm&&r.subscribe(e,function(e){o?r.notify(e):o=e}),r.state=o||{},r}return s(n,e),u(n,[{key:"componentWillReceiveProps",value:function(e){var t=e.name,n=e.subscription;(this.props.name!==t||function(e,t,n){return e?!t||n.some(function(n){return e[n]!==t[n]}):!!t}(this.props.subscription,n,r.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(e,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var e=this.props,n=e.name,r=e.component,i=e.children,a=e.allowNull,u=e.value,s=l(e,["name","component","children","allowNull","value"]),f=this.state,p=(f.blur,f.change,f.focus,f.value),d=l(f,["blur","change","focus","value"]);(void 0===p||null===p&&!a)&&(p="");var h=c({name:n,value:p},this.handlers);return"checkbox"===s.type?h.checked=!!p:"radio"===s.type&&(h.checked=p===u,h.value=u),"function"==typeof i?i(c({input:h,meta:d},s)):"string"==typeof r?t.createElement(r,c({},h,{children:i},s)):o(c({input:h,meta:d,children:i,component:r},s))}}]),n}(t.PureComponent);v.contextTypes={reactFinalForm:n.object},e.Form=d,e.version="0.0.2",e.Field=v,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","final-form"],e):e(t["react-final-form"]={},t.React,t.PropTypes,t.FinalForm)}(this,function(t,e,n,r){"use strict";function i(t,n){var r=t.render,i=t.children,o=t.component,a=f(t,["render","children","component"]);return o?e.createElement(o,c({},a,{children:i})):r?r(c({},a,{children:i})):"function"!=typeof i?null:i(a)}n=n&&n.hasOwnProperty("default")?n.default:n;var o=function(t,e){},a=function(t,e,n){return t?!e||n.some(function(n){return t[n]!==e[n]}):!!e},u=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},l=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},f=function(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},p=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="undefined"!=typeof window&&window.navigator&&window.navigator.product&&"ReactNative"===window.navigator.product,m=function(t,e){if(!e&&t.nativeEvent&&void 0!==t.nativeEvent.text)return t.nativeEvent.text;if(e&&t.nativeEvent)return t.nativeEvent.text;var n=t.target,r=n.type,i=n.value,o=n.checked;switch(r){case"checkbox":return!!o;case"select-multiple":return function(t){var e=[];if(t)for(var n=0;n<t.length;n++){var r=t[n];r.selected&&e.push(r.value)}return e}(t.target.options);default:return i}},h=r.fieldSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),v=function(t){function n(t,e){u(this,n);var r=p(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,e));r.subscribe=function(t,e){var n=t.name,i=t.subscription;r.unsubscribe=r.context.reactFinalForm.registerField(n,e,i||h,r.validate)},r.validate=function(t,e){return r.props.validate&&r.props.validate(t,e)},r.notify=function(t){return r.setState({state:t})},r.handlers={onBlur:function(t){r.state.state.blur()},onChange:function(t){var e=t&&t.target?m(t,b):t;r.state.state.change(""===e?void 0:e)},onFocus:function(t){r.state.state.focus()}};var i=void 0;return o(e.reactFinalForm,"Field must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){i?r.notify(t):i=t}),r.state={state:i||{}},r}return l(n,t),s(n,[{key:"componentWillReceiveProps",value:function(t){var e=t.name,n=t.subscription;(this.props.name!==e||a(this.props.subscription,n,r.fieldSubscriptionItems))&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,n=t.name,r=t.component,o=t.children,a=t.allowNull,u=t.value,s=f(t,["name","component","children","allowNull","value"]),l=this.state.state,p=(l.blur,l.change,l.focus,l.value),b=f(l,["blur","change","focus","value"]);(void 0===p||null===p&&!a)&&(p="");var m=c({name:n,value:p},this.handlers);return"checkbox"===s.type?m.checked=!!p:"radio"===s.type&&(m.checked=p===u,m.value=u),"function"==typeof o?o(c({input:m,meta:b},s)):"string"==typeof r?e.createElement(r,c({},m,{children:o},s)):i(c({input:m,meta:b,children:o,component:r},s))}}]),n}(e.PureComponent);v.contextTypes={reactFinalForm:n.object};var d=r.formSubscriptionItems.reduce(function(t,e){return t[e]=!0,t},{}),y=function(t){function e(t){u(this,e);var n=p(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));n.notify=function(t){return n.setState({state:t})},n.handleSubmit=function(t){t.preventDefault(),n.form.submit()};t.children,t.component;var i=t.debug,a=t.initialValues,s=t.onSubmit,c=(t.render,t.validate),l=t.subscription,f={debug:i,initialValues:a,onSubmit:s,validate:c};try{n.form=r.createForm(f)}catch(t){o(!1,t.message)}var b=void 0;return n.unsubscribe=n.form&&n.form.subscribe(function(t){b?n.notify(t):b=t},l||d),n.state={state:b},n}return l(e,t),s(e,[{key:"getChildContext",value:function(){return{reactFinalForm:this.form}}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=(t.debug,t.initialValues,t.onSubmit,t.subscription,t.validate,f(t,["debug","initialValues","onSubmit","subscription","validate"]));return i(c({},e,this.state.state,{batch:this.form&&this.form.batch,blur:this.form&&this.form.blur,change:this.form&&this.form.change,focus:this.form&&this.form.focus,handleSubmit:this.handleSubmit,reset:this.form&&this.form.reset}))}}]),e}(e.PureComponent);y.childContextTypes={reactFinalForm:n.object},y.displayName="ReactFinalForm("+r.version+")(0.0.6)";var F=function(t){function e(t,n){u(this,e);var r=p(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n));r.subscribe=function(t,e){var n=t.subscription;r.unsubscribe=r.context.reactFinalForm.subscribe(e,n||d)},r.notify=function(t){return r.setState({state:t})};var i=void 0;return o(n.reactFinalForm,"FormSpy must be used inside of a ReactFinalForm component"),r.context.reactFinalForm&&r.subscribe(t,function(t){i?r.notify(t):i=t}),r.state={state:i},r}return l(e,t),s(e,[{key:"componentWillReceiveProps",value:function(t){var e=t.subscription;a(this.props.subscription,e,r.formSubscriptionItems)&&this.context.reactFinalForm&&(this.unsubscribe(),this.subscribe(t,this.notify))}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var t=this.props,e=(t.subscription,f(t,["subscription"]));return i(c({},e,this.state.state))}}]),e}(e.PureComponent);F.contextTypes={reactFinalForm:n.object},t.Field=v,t.Form=y,t.version="0.0.6",t.FormSpy=F,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=react-final-form.umd.min.js.map

package.json

 {
   "name": "react-final-form",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description":
@@ -5,0 +5,0 @@ "High performance subscription-based form state management for React",

README.md

@@ -103,2 +103,6 @@ # 🏁 React Final Form
   * [Synchronous Field-Level Validation](#synchronous-field-level-validation)
+  * [Asynchronous Field-Level Validation](#asynchronous-field-level-validation)
+  * [Hybrid Synchronous/Asynchronous Record-Level Validation](#hybrid-synchronousasynchronous-record-level-validation)
+  * [Submission Errors](#submission-errors)
+  * [Third Party Components](#third-party-components)
 * [Rendering](#rendering)
@@ -108,2 +112,3 @@ * [API](#api)
   * [`Field : React.ComponentType<FieldProps>`](#field--reactcomponenttypefieldprops)
+  * [`FormSpy : React.ComponentType<FormSpyProps>`](#formspy--reactcomponenttypeformspyprops)
 * [Types](#types)
@@ -153,2 +158,8 @@ * [`FieldProps`](#fieldprops)
     * [`handleSubmit: (SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
+  * [`FormSpyProps`](#formspyprops)
+    * [`children?: (props: FormSpyRenderProps) => React.Node`](#children-props-formspyrenderprops--reactnode)
+    * [`component?: React.ComponentType<FormSpyRenderProps>`](#component-reactcomponenttypeformspyrenderprops)
+    * [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
+    * [`subscription?: FormSubscription`](#subscription-formsubscription-1)
+  * [`FormSpyRenderProps`](#formspyrenderprops)
 
@@ -188,6 +199,12 @@ <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-This example demonstrates how to return submission errors from failed submits.
-Notice that the `Promise` should _resolve_ to the submission error (not reject).
-Rejection is reserved for communications or server exceptions.
+Demonstrates how to return submission errors from failed submits. Notice that
+the `Promise` should _resolve_ to the submission error (not reject). Rejection
+is reserved for communications or server exceptions.
 
+### [Third Party Components](https://codesandbox.io/s/40mr0v2r87)
+
+Demonstrates how easy it is to use third party input components. All the third
+party component really needs is `value` and `onChange`, but more complex
+components can accept things like errors.
+
 ## Rendering
@@ -209,8 +226,14 @@
 
-A component that takes [`FormProps`](#formprops).
+A component that takes [`FormProps`](#formprops) and surrounds your entire form.
 
 ### `Field : React.ComponentType<FieldProps>`
 
-A component that takes [`FieldProps`](#fieldprops).
+A component that takes [`FieldProps`](#fieldprops) and renders an individual
+field.
 
+### `FormSpy : React.ComponentType<FormSpyProps>`
+
+A component that takes [`FormSpyProps`](#formspyprops) and can listen to form
+state from inside an optimized `<Form/>`.
+
 ---
@@ -441,1 +464,42 @@
 onSubmit={handleSubmit}/>`.
+
+### `FormSpyProps`
+
+These are the props that you pass to
+[`<FormSpy/>`](#formspy--reactcomponenttypeformspyprops). You must provide one
+of the ways to render: `component`, `render`, or `children`.
+
+#### `children?: (props: FormSpyRenderProps) => React.Node`
+
+A render function that is given [`FormSpyRenderProps`](#formspyrenderprops), as
+well as any non-API props passed into the `<FormSpy/>` component.
+
+#### `component?: React.ComponentType<FormSpyRenderProps>`
+
+A component that is given [`FormSpyRenderProps`](#formspyrenderprops) as props,
+as well as any non-API props passed into the `<FormSpy/>` component.
+
+#### `render?: (props: FormSpyRenderProps) => React.Node`
+
+A render function that is given [`FormSpyRenderProps`](#formspyrenderprops), as
+well as any non-API props passed into the `<FormSpy/>` component.
+
+#### `subscription?: FormSubscription`
+
+A
+[`FormSubscription`](https://github.com/erikras/final-form#formsubscription--string-boolean-)
+that selects of all the items of
+[`FormState`](https://github.com/erikras/final-form#formstate) that you wish to
+update for. If you don't pass a `subscription` prop, it defaults to _all_ of
+[`FormState`](https://github.com/erikras/final-form#formstate).
+
+### `FormSpyRenderProps`
+
+These are the props that
+[`<FormSpy/>`](#formspy--reactcomponenttypeformspyprops) provides to your render
+function or component. These props are of type
+[`FormState`](https://github.com/erikras/final-form#formstate). Keep in mind
+that the values you receive here are dependent upon which values of
+[`FormState`](https://github.com/erikras/final-form#formstate) you have
+subscribed to with the
+[`subscription` prop](https://github.com/erikras/react-final-form#subscription-formsubscription).

No alert changes

Improved metrics

Total package byte prevSize

74526

increased by16.4%

Lines of code

1234

increased by16.75%

Number of lines in readme file

500

increased by14.68%

No dependency changes