Skip to content
This repository was archived by the owner on Aug 23, 2022. It is now read-only.

Commit c376f22

Browse files
committed
Moving local form to main exports and adding guide
1 parent f72b62d commit c376f22

File tree

4 files changed

+42
-4
lines changed

4 files changed

+42
-4
lines changed

docs/guides/local.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Local Forms
2+
3+
As of version `1.1.1`, React Redux Form supports **local forms**. What does this mean? Here's an example:
4+
5+
```jsx
6+
import React from 'react';
7+
import { LocalForm, Control } from 'react-redux-form';
8+
9+
export default class MyApp extends React.Component {
10+
handleChange(values) { ... }
11+
handleUpdate(form) { ... }
12+
render() {
13+
return (
14+
<LocalForm
15+
onUpdate={(form) => this.handleUpdate(form)}
16+
onChange={(values) => this.handleChange(values)}
17+
>
18+
<Control.text model=".username" />
19+
<Control.text model=".password" />
20+
</LocalForm>
21+
);
22+
}
23+
}
24+
```
25+
26+
And just like that, you have a fully functioning form with controls that do everything that RRF's normal forms and controls already do -- handling of model updates on change/blur, updating focus, pristine, touched, validity, submitted, pending, etc. and more -- **without needing to setup Redux\***.
27+
28+
The `<LocalForm>` component takes all the [props from the `<Form>` component](../api/Form.md), with four important props:
29+
30+
- `model="..."` _(String)_: the name of the model in the internal state. This is completely optional, as the model is _not_ related to any external Redux store (default: `"local"`)
31+
- `onUpdate={(formValue) => ...}` _(Function)_: a handler that is called whenever the form value is updated
32+
- `onChange={(modelValue) => ...}` _(Function)_: a handler that is called whenever the form's model value is changed
33+
- `initialState={...}` _(Any)_: the initial state of the model (default: `{}`)
34+
35+
### Notes
36+
- `redux` and `react-redux` _are_ still required as peer dependencies. This just allows you to not have to set up the boilerplate; e.g., the store and reducers.
37+
- As with any React component, whenever the `<LocalForm>` is unmounted, the component's internal state is _gone_. This can be desirable (or undesirable) depending on your use case, so take this into consideration.

src/local.js renamed to src/components/local-form-component.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PropTypes } from 'react';
2-
import Form from './components/form-component';
3-
import combineForms from './reducers/forms-reducer';
2+
import Form from './form-component';
3+
import combineForms from '../reducers/forms-reducer';
44
import { createStore } from 'redux';
55

66
class LocalForm extends React.Component {

src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Field, { createFieldClass } from './components/field-component';
55
import Fieldset from './components/fieldset-component';
66
import Control from './components/control-component';
77
import Form from './components/form-component';
8+
import LocalForm from './components/local-form-component';
89
import Errors from './components/errors-component';
910

1011
import controlPropsMap from './constants/control-props-map';
@@ -41,6 +42,7 @@ export {
4142
Field,
4243
Control,
4344
Form,
45+
LocalForm,
4446
Errors,
4547
Fieldset,
4648

test/local-forms-spec.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint no-return-assign:0 */
22
import React from 'react';
3-
import { Control } from '../src';
4-
import LocalForm from '../src/local';
3+
import { Control, LocalForm } from '../src';
54
import TestUtils from 'react-addons-test-utils';
65
import { assert } from 'chai';
76

0 commit comments

Comments
 (0)