Skip to content

Commit c6d8ae3

Browse files
erikraserikras
committed
Added link to React Alicante talk
1 parent 9e8cf93 commit c6d8ae3

File tree

2 files changed

+127
-122
lines changed

2 files changed

+127
-122
lines changed

‎README.md‎

Lines changed: 127 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -110,130 +110,135 @@ const MyForm = () => (
110110
## Table of Contents
111111

112112
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
113-
114113
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
115-
116114
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
117115

118-
* [Examples](#examples)
119-
* [Simple Example](#simple-example)
120-
* [Synchronous Record-Level Validation](#synchronous-record-level-validation)
121-
* [Synchronous Field-Level Validation](#synchronous-field-level-validation)
122-
* [Asynchronous Field-Level Validation](#asynchronous-field-level-validation)
123-
* [Hybrid Synchronous/Asynchronous Record-Level Validation](#hybrid-synchronousasynchronous-record-level-validation)
124-
* [Submission Errors](#submission-errors)
125-
* [Third Party Components](#third-party-components)
126-
* [Material-UI 1.0](#material-ui-10)
127-
* [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
128-
* [Independent Error Component](#independent-error-component)
129-
* [Loading and Initializing Values](#loading-and-initializing-values)
130-
* [Field Arrays](#field-arrays)
131-
* [Calculated Fields](#calculated-fields)
132-
* [Field Warnings](#field-warnings)
133-
* [Reusable Field Groups](#reusable-field-groups)
134-
* [External Submit](#external-submit)
135-
* [Wizard Form](#wizard-form)
136-
* [Parse and Format (and Normalize)](#parse-and-format-and-normalize)
137-
* [Auto-Save with Debounce](#auto-save-with-debounce)
138-
* [Auto-Save on Field Blur](#auto-save-on-field-blur)
139-
* [Custom Validation Engine](#custom-validation-engine)
140-
* [Loading, Normalizing, Saving, and Reinitializing](#loading-normalizing-saving-and-reinitializing)
141-
* [🏎️ Downshift Type-Ahead](#-downshift-type-ahead)
142-
* [Redux Example](#redux-example)
143-
* [Conditional Fields](#conditional-fields)
144-
* [Listening for External Changes](#listening-for-external-changes)
145-
* [Focus On First Error](#focus-on-first-error)
146-
* [Credit Card Example](#credit-card-example)
147-
* [Async Redux Submission](#async-redux-submission)
148-
* [Declarative Form Rules](#declarative-form-rules)
149-
* [Format String By Pattern](#format-string-by-pattern)
150-
* [AsyncTypeahead and Redux](#asynctypeahead-and-redux)
151-
* [Format On Blur](#format-on-blur)
152-
* [Styling with 🍭 Smooth-UI](#styling-with--smooth-ui)
153-
* [Rendering](#rendering)
154-
* [API](#api)
155-
* [`Field : React.ComponentType<FieldProps>`](#field--reactcomponenttypefieldprops)
156-
* [`Form : React.ComponentType<FormProps>`](#form--reactcomponenttypeformprops)
157-
* [`FormSpy : React.ComponentType<FormSpyProps>`](#formspy--reactcomponenttypeformspyprops)
158-
* [`version: string`](#version-string)
159-
* [Types](#types)
160-
* [`FieldProps`](#fieldprops)
161-
* [`allowNull?: boolean`](#allownull-boolean)
162-
* [`children?: ((props: FieldRenderProps) => React.Node) | React.Node`](#children-props-fieldrenderprops--reactnode--reactnode)
163-
* [`component?: React.ComponentType<FieldRenderProps> | string`](#component-reactcomponenttypefieldrenderprops--string)
164-
* [`format?: ((value: any, name: string) => any) | null`](#format-value-any-name-string--any--null)
165-
* [`formatOnBlur?: boolean`](#formatonblur-boolean)
166-
* [`isEqual?: (a: any, b: any) => boolean`](#isequal-a-any-b-any--boolean)
167-
* [`name: string`](#name-string)
168-
* [`parse?: ((value: any, name: string) => any) | null`](#parse-value-any-name-string--any--null)
169-
* [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode)
170-
* [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
171-
* [`validate?: (value: ?any, allValues: Object) => ?any`](#validate-value-any-allvalues-object--any)
172-
* [`validateFields?: string[]`](#validatefields-string)
173-
* [`value?: any`](#value-any)
174-
* [`FieldRenderProps`](#fieldrenderprops)
175-
* [`input.name: string`](#inputname-string)
176-
* [`input.onBlur: (?SyntheticFocusEvent<*>) => void`](#inputonblur-syntheticfocusevent--void)
177-
* [`input.onChange: (SyntheticInputEvent<*> | any) => void`](#inputonchange-syntheticinputevent--any--void)
178-
* [`input.onFocus: (?SyntheticFocusEvent<*>) => void`](#inputonfocus-syntheticfocusevent--void)
179-
* [`input.value: any`](#inputvalue-any)
180-
* [`meta.active?: boolean`](#metaactive-boolean)
181-
* [`meta.data?: Object`](#metadata-object)
182-
* [`meta.dirty?: boolean`](#metadirty-boolean)
183-
* [`meta.error?: any`](#metaerror-any)
184-
* [`meta.initial?: any`](#metainitial-any)
185-
* [`meta.invalid?: boolean`](#metainvalid-boolean)
186-
* [`meta.pristine?: boolean`](#metapristine-boolean)
187-
* [`meta.submitError?: any`](#metasubmiterror-any)
188-
* [`meta.submitFailed?: boolean`](#metasubmitfailed-boolean)
189-
* [`meta.submitSucceeded?: boolean`](#metasubmitsucceeded-boolean)
190-
* [`meta.touched?: boolean`](#metatouched-boolean)
191-
* [`meta.valid?: boolean`](#metavalid-boolean)
192-
* [`meta.visited?: boolean`](#metavisited-boolean)
193-
* [`FormProps`](#formprops)
194-
* [`children?: ((props: FormRenderProps) => React.Node) | React.Node`](#children-props-formrenderprops--reactnode--reactnode)
195-
* [`component?: React.ComponentType<FormRenderProps>`](#component-reactcomponenttypeformrenderprops)
196-
* [`debug?: DebugFunction`](#debug-debugfunction)
197-
* [`decorators?: Decorator[]`](#decorators-decorator)
198-
* [`initialValues?: Object`](#initialvalues-object)
199-
* [`keepDirtyOnReinitialize?: boolean`](#keepdirtyonreinitialize-boolean)
200-
* [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
201-
* [`onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`](#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void)
202-
* [`render?: (props: FormRenderProps) => React.Node`](#render-props-formrenderprops--reactnode)
203-
* [`subscription?: FormSubscription`](#subscription-formsubscription)
204-
* [`validate?: (values: Object) => Object | Promise<Object>`](#validate-values-object--object--promiseobject)
205-
* [`validateOnBlur?: boolean`](#validateonblur-boolean)
206-
* [`FormRenderProps`](#formrenderprops)
207-
* [`batch: (fn: () => void) => void)`](#batch-fn---void--void)
208-
* [`blur: (name: string) => void`](#blur-name-string--void)
209-
* [`change: (name: string, value: any) => void`](#change-name-string-value-any--void)
210-
* [`focus: (name: string) => void`](#focus-name-string--void)
211-
* [`form: FormApi`](#form-formapi)
212-
* [`handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
213-
* [`initialize: (values: Object) => void`](#initialize-values-object--void)
214-
* [`mutators?: { [string]: Function }`](#mutators--string-function-)
215-
* [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void)
216-
* [`FormSpyProps`](#formspyprops)
217-
* [`children?: ((props: FormSpyRenderProps) => React.Node) | React.Node`](#children-props-formspyrenderprops--reactnode--reactnode)
218-
* [`component?: React.ComponentType<FormSpyRenderProps>`](#component-reactcomponenttypeformspyrenderprops)
219-
* [`onChange?: (formState: FormState) => void`](#onchange-formstate-formstate--void)
220-
* [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
221-
* [`subscription?: FormSubscription`](#subscription-formsubscription-1)
222-
* [`FormSpyRenderProps`](#formspyrenderprops)
223-
* [`batch: (fn: () => void) => void)`](#batch-fn---void--void-1)
224-
* [`blur: (name: string) => void`](#blur-name-string--void-1)
225-
* [`change: (name: string, value: any) => void`](#change-name-string-value-any--void-1)
226-
* [`focus: (name: string) => void`](#focus-name-string--void-1)
227-
* [`form: FormApi`](#form-formapi-1)
228-
* [`initialize: (values: Object) => void`](#initialize-values-object--void-1)
229-
* [`mutators?: { [string]: Function }`](#mutators--string-function--1)
230-
* [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void-1)
231-
* [Contributors](#contributors)
232-
* [Backers](#backers)
233-
* [Sponsors](#sponsors)
116+
- [Videos](#videos)
117+
- [Examples](#examples)
118+
- [Simple Example](#simple-example)
119+
- [Synchronous Record-Level Validation](#synchronous-record-level-validation)
120+
- [Synchronous Field-Level Validation](#synchronous-field-level-validation)
121+
- [Asynchronous Field-Level Validation](#asynchronous-field-level-validation)
122+
- [Hybrid Synchronous/Asynchronous Record-Level Validation](#hybrid-synchronousasynchronous-record-level-validation)
123+
- [Submission Errors](#submission-errors)
124+
- [Third Party Components](#third-party-components)
125+
- [Material-UI 1.0](#material-ui-10)
126+
- [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
127+
- [Independent Error Component](#independent-error-component)
128+
- [Loading and Initializing Values](#loading-and-initializing-values)
129+
- [Field Arrays](#field-arrays)
130+
- [Calculated Fields](#calculated-fields)
131+
- [Field Warnings](#field-warnings)
132+
- [Reusable Field Groups](#reusable-field-groups)
133+
- [External Submit](#external-submit)
134+
- [Wizard Form](#wizard-form)
135+
- [Parse and Format (and Normalize)](#parse-and-format-and-normalize)
136+
- [Auto-Save with Debounce](#auto-save-with-debounce)
137+
- [Auto-Save on Field Blur](#auto-save-on-field-blur)
138+
- [Custom Validation Engine](#custom-validation-engine)
139+
- [Loading, Normalizing, Saving, and Reinitializing](#loading-normalizing-saving-and-reinitializing)
140+
- [🏎️ Downshift Type-Ahead](#-downshift-type-ahead)
141+
- [Redux Example](#redux-example)
142+
- [Conditional Fields](#conditional-fields)
143+
- [Listening for External Changes](#listening-for-external-changes)
144+
- [Focus On First Error](#focus-on-first-error)
145+
- [Credit Card Example](#credit-card-example)
146+
- [Async Redux Submission](#async-redux-submission)
147+
- [Declarative Form Rules](#declarative-form-rules)
148+
- [Format String By Pattern](#format-string-by-pattern)
149+
- [AsyncTypeahead and Redux](#asynctypeahead-and-redux)
150+
- [Format On Blur](#format-on-blur)
151+
- [Styling with 🍭 Smooth-UI](#styling-with--smooth-ui)
152+
- [Rendering](#rendering)
153+
- [API](#api)
154+
- [`Field : React.ComponentType<FieldProps>`](#field--reactcomponenttypefieldprops)
155+
- [`Form : React.ComponentType<FormProps>`](#form--reactcomponenttypeformprops)
156+
- [`FormSpy : React.ComponentType<FormSpyProps>`](#formspy--reactcomponenttypeformspyprops)
157+
- [`version: string`](#version-string)
158+
- [Types](#types)
159+
- [`FieldProps`](#fieldprops)
160+
- [`allowNull?: boolean`](#allownull-boolean)
161+
- [`children?: ((props: FieldRenderProps) => React.Node) | React.Node`](#children-props-fieldrenderprops--reactnode--reactnode)
162+
- [`component?: React.ComponentType<FieldRenderProps> | string`](#component-reactcomponenttypefieldrenderprops--string)
163+
- [`format?: ((value: any, name: string) => any) | null`](#format-value-any-name-string--any--null)
164+
- [`formatOnBlur?: boolean`](#formatonblur-boolean)
165+
- [`isEqual?: (a: any, b: any) => boolean`](#isequal-a-any-b-any--boolean)
166+
- [`name: string`](#name-string)
167+
- [`parse?: ((value: any, name: string) => any) | null`](#parse-value-any-name-string--any--null)
168+
- [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode)
169+
- [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
170+
- [`validate?: (value: ?any, allValues: Object) => ?any`](#validate-value-any-allvalues-object--any)
171+
- [`validateFields?: string[]`](#validatefields-string)
172+
- [`value?: any`](#value-any)
173+
- [`FieldRenderProps`](#fieldrenderprops)
174+
- [`input.name: string`](#inputname-string)
175+
- [`input.onBlur: (?SyntheticFocusEvent<*>) => void`](#inputonblur-syntheticfocusevent--void)
176+
- [`input.onChange: (SyntheticInputEvent<*> | any) => void`](#inputonchange-syntheticinputevent--any--void)
177+
- [`input.onFocus: (?SyntheticFocusEvent<*>) => void`](#inputonfocus-syntheticfocusevent--void)
178+
- [`input.value: any`](#inputvalue-any)
179+
- [`meta.active?: boolean`](#metaactive-boolean)
180+
- [`meta.data?: Object`](#metadata-object)
181+
- [`meta.dirty?: boolean`](#metadirty-boolean)
182+
- [`meta.error?: any`](#metaerror-any)
183+
- [`meta.initial?: any`](#metainitial-any)
184+
- [`meta.invalid?: boolean`](#metainvalid-boolean)
185+
- [`meta.pristine?: boolean`](#metapristine-boolean)
186+
- [`meta.submitError?: any`](#metasubmiterror-any)
187+
- [`meta.submitFailed?: boolean`](#metasubmitfailed-boolean)
188+
- [`meta.submitSucceeded?: boolean`](#metasubmitsucceeded-boolean)
189+
- [`meta.touched?: boolean`](#metatouched-boolean)
190+
- [`meta.valid?: boolean`](#metavalid-boolean)
191+
- [`meta.visited?: boolean`](#metavisited-boolean)
192+
- [`FormProps`](#formprops)
193+
- [`children?: ((props: FormRenderProps) => React.Node) | React.Node`](#children-props-formrenderprops--reactnode--reactnode)
194+
- [`component?: React.ComponentType<FormRenderProps>`](#component-reactcomponenttypeformrenderprops)
195+
- [`debug?: DebugFunction`](#debug-debugfunction)
196+
- [`decorators?: Decorator[]`](#decorators-decorator)
197+
- [`initialValues?: Object`](#initialvalues-object)
198+
- [`keepDirtyOnReinitialize?: boolean`](#keepdirtyonreinitialize-boolean)
199+
- [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
200+
- [`onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void`](#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void)
201+
- [`render?: (props: FormRenderProps) => React.Node`](#render-props-formrenderprops--reactnode)
202+
- [`subscription?: FormSubscription`](#subscription-formsubscription)
203+
- [`validate?: (values: Object) => Object | Promise<Object>`](#validate-values-object--object--promiseobject)
204+
- [`validateOnBlur?: boolean`](#validateonblur-boolean)
205+
- [`FormRenderProps`](#formrenderprops)
206+
- [`batch: (fn: () => void) => void)`](#batch-fn---void--void)
207+
- [`blur: (name: string) => void`](#blur-name-string--void)
208+
- [`change: (name: string, value: any) => void`](#change-name-string-value-any--void)
209+
- [`focus: (name: string) => void`](#focus-name-string--void)
210+
- [`form: FormApi`](#form-formapi)
211+
- [`handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
212+
- [`initialize: (values: Object) => void`](#initialize-values-object--void)
213+
- [`mutators?: { [string]: Function }`](#mutators--string-function-)
214+
- [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void)
215+
- [`FormSpyProps`](#formspyprops)
216+
- [`children?: ((props: FormSpyRenderProps) => React.Node) | React.Node`](#children-props-formspyrenderprops--reactnode--reactnode)
217+
- [`component?: React.ComponentType<FormSpyRenderProps>`](#component-reactcomponenttypeformspyrenderprops)
218+
- [`onChange?: (formState: FormState) => void`](#onchange-formstate-formstate--void)
219+
- [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
220+
- [`subscription?: FormSubscription`](#subscription-formsubscription-1)
221+
- [`FormSpyRenderProps`](#formspyrenderprops)
222+
- [`batch: (fn: () => void) => void)`](#batch-fn---void--void-1)
223+
- [`blur: (name: string) => void`](#blur-name-string--void-1)
224+
- [`change: (name: string, value: any) => void`](#change-name-string-value-any--void-1)
225+
- [`focus: (name: string) => void`](#focus-name-string--void-1)
226+
- [`form: FormApi`](#form-formapi-1)
227+
- [`initialize: (values: Object) => void`](#initialize-values-object--void-1)
228+
- [`mutators?: { [string]: Function }`](#mutators--string-function--1)
229+
- [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void-1)
230+
- [Contributors](#contributors)
231+
- [Backers](#backers)
232+
- [Sponsors](#sponsors)
234233

235234
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
236235

236+
## Videos
237+
238+
| [![Next Generation Forms with 🏁 React Final Form – React Alicante 2018](docs/ReactAlicante2018.gif)](https://youtu.be/WoSzy-4mviQ) |
239+
| :---------------------------------------------------------------------------------------------------------------------------------: |
240+
| **Next Generation Forms with 🏁 React Final Form – React Alicante 2018** |
241+
237242
## Examples
238243

239244
### [Simple Example](https://codesandbox.io/s/ww40y2m595)
@@ -510,10 +515,10 @@ returns an error if the value is invalid, or `undefined` if the value is valid.
510515

511516
**This is only used for checkboxes and radio buttons!**
512517

513-
* Radio Buttons: The value of the radio button. The radio button will render as `checked` if and only if the value given here `===` the value for the field in the form.
514-
* Checkboxes:
515-
* `value` is specified: the checkbox will be `checked` if the value given in `value` is contained in the array that is the value for the field for the form. Checking the box will add the value to the array, and unchecking the checkbox will remove the value from the array.
516-
* no `value` is specified: the checkbox will be `checked` if the value is truthy. Checking the box will set the value to `true`, and unchecking the checkbox will set the value to `false`.
518+
- Radio Buttons: The value of the radio button. The radio button will render as `checked` if and only if the value given here `===` the value for the field in the form.
519+
- Checkboxes:
520+
- `value` is specified: the checkbox will be `checked` if the value given in `value` is contained in the array that is the value for the field for the form. Checking the box will add the value to the array, and unchecking the checkbox will remove the value from the array.
521+
- no `value` is specified: the checkbox will be `checked` if the value is truthy. Checking the box will set the value to `true`, and unchecking the checkbox will set the value to `false`.
517522

518523
### `FieldRenderProps`
519524

‎docs/ReactAlicante2018.gif‎

357 KB
Loading

0 commit comments

Comments
 (0)