Merge branch 'master' of github.com:davidkpiano/react-redux-form

Author: davidkpiano

README.md

@@ -1,7 +1,9 @@
 # React Redux Form
 
 [![Join the chat at https://gitter.im/react-redux-form/Lobby](https://badges.gitter.im/react-redux-form/Lobby.svg)](https://gitter.im/react-redux-form/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Build Status](https://travis-ci.org/davidkpiano/react-redux-form.svg?branch=master)](https://travis-ci.org/davidkpiano/react-redux-form) [![npm version](https://badge.fury.io/js/react-redux-form.svg)](https://badge.fury.io/js/react-redux-form)
+[![Build Status](https://travis-ci.org/davidkpiano/react-redux-form.svg?branch=master)](https://travis-ci.org/davidkpiano/react-redux-form) 
+[![npm version](https://badge.fury.io/js/react-redux-form.svg)](https://badge.fury.io/js/react-redux-form)
+[![CDNJS](https://img.shields.io/cdnjs/v/react-redux-form.svg)](https://cdnjs.com/libraries/react-redux-form)
 
 ## [Read the Documentation](https://davidkpiano.github.io/react-redux-form/docs.html)
 

docs/api/Control.md

@@ -15,7 +15,7 @@
 - [`controlProps`](#prop-controlProps)
 - [`component`](#prop-component)
 - [`ignore`](#prop-ignore)
-- [`disabled`](#disabled)
+- [`disabled`](#prop-disabled)
 - [`getRef`](#prop-getRef)
 - [`persist`](#prop-persist)
 - [`getValue`](#prop-getValue)
@@ -74,8 +74,7 @@ export default App; // no need to connect
 
 # Prop Types
 
-<h2 id="prop-model"></h2>
-## `model="..."` (required)
+## `model="..."` (required) {#prop-model}
 
 _(String | Function)_: The string representing the model value in the store.
 ```jsx
@@ -91,8 +90,7 @@ export default createStore(combineForms({
 
 It can also be a function that returns a string model. See [the documentation on tracking](../guides/tracking.md) for more information.
 
-<h2 id="prop-mapProps"></h2>
-## `mapProps={{...}}`
+## `mapProps={{...}}` {#prop-mapProps}
 _(Object | Function)_: A custom mapping from props provided by `Control` to props received by the component. Can be:
 
 - An object, where each value is a function from original props to corresponding value in result props.
@@ -114,8 +112,7 @@ Examples:
 
 See [the documentation on custom controls](../guides/custom-controls.md) for more information.
 
-<h2 id="prop-updateOn"></h2>
-## `updateOn="..."`
+## `updateOn="..."` {#prop-updateOn}
 _(String | Array)_: A string/array of strings specifying when the component should dispatch a `change(...)` action, with one of these values:
 
 - `"change"` - will dispatch in `onChange`
@@ -129,8 +126,7 @@ You can also specify `updateOn={['change', 'blur']}` as an array of one or more
 ### Notes
 - Use the `changeAction` prop if you want to dispatch custom actions along with the `actions.change(...)` action.
 
-<h2 id="prop-validators"></h2>
-## `validators={{...}}`
+## `validators={{...}}` {#prop-validators}
 _(Object)_: A map where the keys are validation keys, and the values are the corresponding functions that determine the validity of each key, given the model's value.
 
 For example, this control validates that a username exists and is longer than 4 characters:
@@ -158,8 +154,7 @@ const length = (val) => val.length > 8;
 />
 ```
 
-<h2 id="prop-validateOn"></h2>
-## `validateOn="..."`
+## `validateOn="..."` {#prop-validateOn}
 _(String | Array)_: A string/array of strings specifying when validation should occur. By default, validation happens with whatever `updateOn` is set to. The `validateOn` property can have these values:
 - `"change"` - validate on the `onChange` event handler
 - `"blur"` - validate on the `onBlur` event handler
@@ -169,8 +164,7 @@ _(String | Array)_: A string/array of strings specifying when validation should
 - Validation will always occur **on load**; i.e., when the component is mounted. This is to ensure an accurate validation state for a new form.
 - To avoid displaying error messages on load (as controls might be invalid), use the `.pristine` property of the control when conditionally showing error messages, or use the `<Errors>` component.
 
-<h2 id="prop-asyncValidators"></h2>
-## `asyncValidators={{...}}`
+## `asyncValidators={{...}}` {#prop-asyncValidators}
 _(Object)_: A map where the keys are validation keys, and the values are the corresponding functions that (asynchronously) determine the validity of each key, given the model's value.
 
 Each async validator function is called with 2 arguments:
@@ -195,15 +189,13 @@ import isAvailable from '../path/to/is-available';
 ### Notes
 - Async validators will run on `blur`, unless you specify otherwise in the `asyncValidateOn="..."` prop.
 
-<h2 id="prop-asyncValidateOn"></h2>
-## `asyncValidateOn="..."`
+## `asyncValidateOn="..."` {#prop-asyncValidateOn}
 _(String | Array)_: A string/array of strings specifying when async validation should occur. By default, validation happens on `"blur"`. The `asyncValidateOn` property can have these values:
 - `"change"` - validate on the `onChange` event handler
 - `"blur"` (default) - validate on the `onBlur` event handler
 - `"focus"` - validate on the `onFocus` event handler
 
-<h2 id="prop-errors"></h2>
-## `errors={{...}}`
+## `errors={{...}}` {#prop-errors}
 _(Object)_: A map where the keys are error keys, and the values are the corresponding error validator functions that determine the invalidity of each key, given the model's value.
 
 An **error validator** is a function that returns `true` or a truthy value (such as a string) if invalid, and `false` if valid.
@@ -220,8 +212,7 @@ For example, this control validates that a username exists and is longer than 4
 />
 ```
 
-<h2 id="prop-parser"></h2>
-### `parser={() => ...}`
+### `parser={() => ...}` {#prop-parser}
 _(Function)_: A function that _parses_ the view value of the control before it is changed. It takes in two arguments:
 - `value` - the view value that represents the _next_ model value
 - `previous` (optional) - the current model value _before_ it is changed
@@ -239,8 +230,7 @@ function toAge(value) {
 >
 ```
 
-<h2 id="prop-changeAction"></h2>
-## `changeAction={() => ...}`
+## `changeAction={() => ...}` {#prop-changeAction}
 An action creator (function) that specifies which action the `<Control>` component should use when dispatching a change to the model. For example, this action is similar to:
 
 - `actions.change(model, value)` for text input controls
@@ -281,8 +271,7 @@ function changeAndSubmit(model, value) {
 - Use `changeAction` to do any other custom actions whenever your value is to change.
 - Since `changeAction` expects an action creator and `redux-thunk` is used, you can asynchronously dispatch actions (like the example above).
 
-<h2 id="prop-controlProps"></h2>
-## `controlProps={{...}}`
+## `controlProps={{...}}` {#prop-controlProps}
 _(Object)_: A mapping of control-specific props that will be applied directly to the rendered control. In some cases, this can be a safer way of applying props, especially if there are naming conflicts between `<Control>`-specific props (such as `"model"`) and props that need to go on the rendered control (e.g., `<input {...props} />`).
 
 The normal behavior is that any extraneous props on `<Control>` that are not part of `Control.propTypes` (which are documented here) will be given to the rendered input.
@@ -298,8 +287,7 @@ Example:
 />
 ```
 
-<h2 id="prop-component"></h2>
-## `component={...}`
+## `component={...}` {#prop-component}
 _(Function | String | Node)_: A custom component can be passed into the `component={...}` prop, and standard control props and event handlers (such as `onChange`, `onBlur`, `onFocus`, `value`, etc.) will be mapped as expected:
 
 ```jsx
@@ -314,8 +302,7 @@ const MyTextInput = (props) => <input className="my-input" {...props} />;
 />
 ```
 
-<h2 id="prop-ignore"></h2>
-## `ignore={[...]}`
+## `ignore={[...]}` {#prop-ignore}
 _(String | Array)_: The event(s) that you want the `<Control>` to ignore. This can be good for performance and/or for de-cluttering the console log.
 
 For instance, if you don't care whether a `<Control>` is focused or blurred:
@@ -328,7 +315,7 @@ For instance, if you don't care whether a `<Control>` is focused or blurred:
 />
 ```
 
-## `disabled={...}`
+## `disabled={...}` {#prop-disabled}
 _(Any)_: The `disabled` prop works just like you'd expect for controls that support the HTML5 `disabled` attribute.
 
 However, in `<Control>`, it can be a boolean, or a function, string, or object as a [Lodash iteratee](https://lodash.com/docs#iteratee).
@@ -351,8 +338,7 @@ For example:
 
 (since: version 1.3.0)
 
-<h2 id="prop-getRef"></h2>
-## `getRef={() => ...}`
+## `getRef={() => ...}` {#prop-getRef}
 _(Function)_: Calls the callback provided to the `getRef` prop with the node instance. Similar to `ref`.
 
 ```jsx
@@ -362,8 +348,7 @@ _(Function)_: Calls the callback provided to the `getRef` prop with the node ins
 />
 ```
 
-<h2 id="prop-persist"></h2>
-## `persist={false}`
+## `persist={false}` {#prop-persist}
 _(Boolean)_: Signifies that the field state (validation, etc.) should not persist when the component is unmounted. Default: `false`
 
 ```jsx
@@ -377,7 +362,7 @@ _(Boolean)_: Signifies that the field state (validation, etc.) should not persis
 />
 ```
 
-## `getValue={(event, props) => ...}`
+## `getValue={(event, props) => ...}` {#prop-getValue}
 _(Function)_: Determines the value given the `event` (from `onChange`) and optionally the control component's `props`.
 
 By default, the `getValue` function returns the value by hecking if the `event` is a DOM event.
@@ -395,7 +380,7 @@ For `<Control.checkbox />`, the default `getValue` function is:
 />
 ```
 
-## `isToggle={false}`
+## `isToggle={false}` {#prop-isToggle}
 _(Boolean)_: Signifies that the control is a toggle (e.g., a checkbox or a radio). If `true`, then some optimizations are made.
 
 Default: `true` for `<Control.radio>` and `<Control.checkbox>`, `false` for all other controls.