Updating the docs

Author: davidkpiano

docs/api/Control.md

@@ -261,7 +261,7 @@ function changeAndSubmit(model, value) {
 - 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={{...}}`
 _(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.
@@ -278,7 +278,7 @@ Example:
 ```
 
 <h2 id="prop-component"></h2>
-### `component={...}`
+## `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
@@ -294,7 +294,7 @@ const MyTextInput = (props) => <input className="my-input" {...props} />;
 ```
 
 <h2 id="prop-ignore"></h2>
-### `ignore={[...]}`
+## `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:
@@ -307,7 +307,7 @@ For instance, if you don't care whether a `<Control>` is focused or blurred:
 />
 ```
 
-### `disabled={...}`
+## `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).
@@ -329,3 +329,13 @@ For example:
 - `disabled={(fieldValue) => !fieldValue.valid}` will call the function provided with the `fieldValue` to determine its `disabled` state.
 
 (since: version 1.3.0)
+
+## `getRef={() => ...}`
+_(Function)_: Calls the callback provided to the `getRef` prop with the node instance. Similar to `ref`.
+
+```jsx
+<Control.text
+  model="user.name"
+  getRef={(node) => this.attach(node)}
+/>
+```

docs/api/Field.md

@@ -55,3 +55,13 @@ const { showTerritories } = this.props;
   <StatePicker territories={showTerritories} />
 </Field>
 ```
+
+### `getRef={() => ...}`
+_(Function)_: Calls the callback provided to the `getRef` prop with the node instance. Similar to `ref`.
+
+```jsx
+<Control.text
+  model="user.name"
+  getRef={(node) => this.attach(node)}
+/>
+```

docs/api/Form.md

@@ -25,7 +25,7 @@ const passwordsMatch = ({ password, confirmPassword }) => {
     type="email"
     model=".email"
   />
-  
+
   <Control
     type="password"
     model=".password"
@@ -116,10 +116,10 @@ class MyForm extends React.Component {
     .then((res) => {
       // ...
     });
-    
+
     dispatch(actions.submit('user', userPromise));
   }
-  
+
   render() {
     return (
       <Form
@@ -163,7 +163,7 @@ class MyForm extends React.Component {
     // logs errors for user.email
     console.log(userForm.email.errors);
   }
-  
+
   render() {
     return (
       <Form
@@ -208,3 +208,13 @@ _(Function)_ The handler function that is called with the form's model value whe
 ### Notes
 - This is also an optional but useful property, especially if you are using [local forms](../guides/local.md).
 - Remember: the _model value_ is the value of the form's model, specified by the `model="..."` prop. The entire model value will be passed in.
+
+## `getRef={() => ...}`
+_(Function)_: Calls the callback provided to the `getRef` prop with the node instance. Similar to `ref`.
+
+```jsx
+<Control.text
+  model="user.name"
+  getRef={(node) => this.attach(node)}
+/>
+```

docs/guides/faqs.md

@@ -50,9 +50,21 @@ const BirthDate = ({forModel}) => (
     <Control model=".day" placeholder="Day" />
     <Control model=".month" placeholder="Month" />
     <Control model=".year" placeholder="Year" />
-  </Form> 
+  </Form>
 );
 
 export default BirthDate;
 ```
 
+### How do I get the component instance? `ref={...}` doesn't work.
+
+Use `getRef={(node) => ...}` in place of `ref`. This is due to the fact that React treats the `ref` prop as a "magic" prop that doesn't get propagated down through wrapped components.
+
+You can use `getRef` on `<Field>`, `<Control>`, `<Form>`, or `<LocalForm>` components.
+
+```jsx
+<Control.text
+  model="user.name"
+  getRef={(node) => this.attach(node)}
+/>
+```