Skip to content

Commit

Permalink
Added link to React Alicante talk
Browse files Browse the repository at this point in the history
  • Loading branch information
@erikras
erikras committed Sep 19, 2018
1 parent 9e8cf93 commit c6d8ae3
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 122 deletions.
249 changes: 127 additions & 122 deletions README.md
View file
Expand Up @@ -110,130 +110,135 @@ const MyForm = () => (
## Table of Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->

<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

* [Examples](#examples)
* [Simple Example](#simple-example)
* [Synchronous Record-Level Validation](#synchronous-record-level-validation)
* [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)
* [Material-UI 1.0](#material-ui-10)
* [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
* [Independent Error Component](#independent-error-component)
* [Loading and Initializing Values](#loading-and-initializing-values)
* [Field Arrays](#field-arrays)
* [Calculated Fields](#calculated-fields)
* [Field Warnings](#field-warnings)
* [Reusable Field Groups](#reusable-field-groups)
* [External Submit](#external-submit)
* [Wizard Form](#wizard-form)
* [Parse and Format (and Normalize)](#parse-and-format-and-normalize)
* [Auto-Save with Debounce](#auto-save-with-debounce)
* [Auto-Save on Field Blur](#auto-save-on-field-blur)
* [Custom Validation Engine](#custom-validation-engine)
* [Loading, Normalizing, Saving, and Reinitializing](#loading-normalizing-saving-and-reinitializing)
* [🏎️ Downshift Type-Ahead](#-downshift-type-ahead)
* [Redux Example](#redux-example)
* [Conditional Fields](#conditional-fields)
* [Listening for External Changes](#listening-for-external-changes)
* [Focus On First Error](#focus-on-first-error)
* [Credit Card Example](#credit-card-example)
* [Async Redux Submission](#async-redux-submission)
* [Declarative Form Rules](#declarative-form-rules)
* [Format String By Pattern](#format-string-by-pattern)
* [AsyncTypeahead and Redux](#asynctypeahead-and-redux)
* [Format On Blur](#format-on-blur)
* [Styling with 🍭 Smooth-UI](#styling-with--smooth-ui)
* [Rendering](#rendering)
* [API](#api)
* [`Field : React.ComponentType<FieldProps>`](#field--reactcomponenttypefieldprops)
* [`Form : React.ComponentType<FormProps>`](#form--reactcomponenttypeformprops)
* [`FormSpy : React.ComponentType<FormSpyProps>`](#formspy--reactcomponenttypeformspyprops)
* [`version: string`](#version-string)
* [Types](#types)
* [`FieldProps`](#fieldprops)
* [`allowNull?: boolean`](#allownull-boolean)
* [`children?: ((props: FieldRenderProps) => React.Node) | React.Node`](#children-props-fieldrenderprops--reactnode--reactnode)
* [`component?: React.ComponentType<FieldRenderProps> | string`](#component-reactcomponenttypefieldrenderprops--string)
* [`format?: ((value: any, name: string) => any) | null`](#format-value-any-name-string--any--null)
* [`formatOnBlur?: boolean`](#formatonblur-boolean)
* [`isEqual?: (a: any, b: any) => boolean`](#isequal-a-any-b-any--boolean)
* [`name: string`](#name-string)
* [`parse?: ((value: any, name: string) => any) | null`](#parse-value-any-name-string--any--null)
* [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode)
* [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
* [`validate?: (value: ?any, allValues: Object) => ?any`](#validate-value-any-allvalues-object--any)
* [`validateFields?: string[]`](#validatefields-string)
* [`value?: any`](#value-any)
* [`FieldRenderProps`](#fieldrenderprops)
* [`input.name: string`](#inputname-string)
* [`input.onBlur: (?SyntheticFocusEvent<*>) => void`](#inputonblur-syntheticfocusevent--void)
* [`input.onChange: (SyntheticInputEvent<*> | any) => void`](#inputonchange-syntheticinputevent--any--void)
* [`input.onFocus: (?SyntheticFocusEvent<*>) => void`](#inputonfocus-syntheticfocusevent--void)
* [`input.value: any`](#inputvalue-any)
* [`meta.active?: boolean`](#metaactive-boolean)
* [`meta.data?: Object`](#metadata-object)
* [`meta.dirty?: boolean`](#metadirty-boolean)
* [`meta.error?: any`](#metaerror-any)
* [`meta.initial?: any`](#metainitial-any)
* [`meta.invalid?: boolean`](#metainvalid-boolean)
* [`meta.pristine?: boolean`](#metapristine-boolean)
* [`meta.submitError?: any`](#metasubmiterror-any)
* [`meta.submitFailed?: boolean`](#metasubmitfailed-boolean)
* [`meta.submitSucceeded?: boolean`](#metasubmitsucceeded-boolean)
* [`meta.touched?: boolean`](#metatouched-boolean)
* [`meta.valid?: boolean`](#metavalid-boolean)
* [`meta.visited?: boolean`](#metavisited-boolean)
* [`FormProps`](#formprops)
* [`children?: ((props: FormRenderProps) => React.Node) | React.Node`](#children-props-formrenderprops--reactnode--reactnode)
* [`component?: React.ComponentType<FormRenderProps>`](#component-reactcomponenttypeformrenderprops)
* [`debug?: DebugFunction`](#debug-debugfunction)
* [`decorators?: Decorator[]`](#decorators-decorator)
* [`initialValues?: Object`](#initialvalues-object)
* [`keepDirtyOnReinitialize?: boolean`](#keepdirtyonreinitialize-boolean)
* [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
* [`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)
* [`render?: (props: FormRenderProps) => React.Node`](#render-props-formrenderprops--reactnode)
* [`subscription?: FormSubscription`](#subscription-formsubscription)
* [`validate?: (values: Object) => Object | Promise<Object>`](#validate-values-object--object--promiseobject)
* [`validateOnBlur?: boolean`](#validateonblur-boolean)
* [`FormRenderProps`](#formrenderprops)
* [`batch: (fn: () => void) => void)`](#batch-fn---void--void)
* [`blur: (name: string) => void`](#blur-name-string--void)
* [`change: (name: string, value: any) => void`](#change-name-string-value-any--void)
* [`focus: (name: string) => void`](#focus-name-string--void)
* [`form: FormApi`](#form-formapi)
* [`handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
* [`initialize: (values: Object) => void`](#initialize-values-object--void)
* [`mutators?: { [string]: Function }`](#mutators--string-function-)
* [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void)
* [`FormSpyProps`](#formspyprops)
* [`children?: ((props: FormSpyRenderProps) => React.Node) | React.Node`](#children-props-formspyrenderprops--reactnode--reactnode)
* [`component?: React.ComponentType<FormSpyRenderProps>`](#component-reactcomponenttypeformspyrenderprops)
* [`onChange?: (formState: FormState) => void`](#onchange-formstate-formstate--void)
* [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
* [`subscription?: FormSubscription`](#subscription-formsubscription-1)
* [`FormSpyRenderProps`](#formspyrenderprops)
* [`batch: (fn: () => void) => void)`](#batch-fn---void--void-1)
* [`blur: (name: string) => void`](#blur-name-string--void-1)
* [`change: (name: string, value: any) => void`](#change-name-string-value-any--void-1)
* [`focus: (name: string) => void`](#focus-name-string--void-1)
* [`form: FormApi`](#form-formapi-1)
* [`initialize: (values: Object) => void`](#initialize-values-object--void-1)
* [`mutators?: { [string]: Function }`](#mutators--string-function--1)
* [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void-1)
* [Contributors](#contributors)
* [Backers](#backers)
* [Sponsors](#sponsors)
- [Videos](#videos)
- [Examples](#examples)
- [Simple Example](#simple-example)
- [Synchronous Record-Level Validation](#synchronous-record-level-validation)
- [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)
- [Material-UI 1.0](#material-ui-10)
- [💥 Performance Optimization Through Subscriptions 💥](#-performance-optimization-through-subscriptions-)
- [Independent Error Component](#independent-error-component)
- [Loading and Initializing Values](#loading-and-initializing-values)
- [Field Arrays](#field-arrays)
- [Calculated Fields](#calculated-fields)
- [Field Warnings](#field-warnings)
- [Reusable Field Groups](#reusable-field-groups)
- [External Submit](#external-submit)
- [Wizard Form](#wizard-form)
- [Parse and Format (and Normalize)](#parse-and-format-and-normalize)
- [Auto-Save with Debounce](#auto-save-with-debounce)
- [Auto-Save on Field Blur](#auto-save-on-field-blur)
- [Custom Validation Engine](#custom-validation-engine)
- [Loading, Normalizing, Saving, and Reinitializing](#loading-normalizing-saving-and-reinitializing)
- [🏎️ Downshift Type-Ahead](#-downshift-type-ahead)
- [Redux Example](#redux-example)
- [Conditional Fields](#conditional-fields)
- [Listening for External Changes](#listening-for-external-changes)
- [Focus On First Error](#focus-on-first-error)
- [Credit Card Example](#credit-card-example)
- [Async Redux Submission](#async-redux-submission)
- [Declarative Form Rules](#declarative-form-rules)
- [Format String By Pattern](#format-string-by-pattern)
- [AsyncTypeahead and Redux](#asynctypeahead-and-redux)
- [Format On Blur](#format-on-blur)
- [Styling with 🍭 Smooth-UI](#styling-with--smooth-ui)
- [Rendering](#rendering)
- [API](#api)
- [`Field : React.ComponentType<FieldProps>`](#field--reactcomponenttypefieldprops)
- [`Form : React.ComponentType<FormProps>`](#form--reactcomponenttypeformprops)
- [`FormSpy : React.ComponentType<FormSpyProps>`](#formspy--reactcomponenttypeformspyprops)
- [`version: string`](#version-string)
- [Types](#types)
- [`FieldProps`](#fieldprops)
- [`allowNull?: boolean`](#allownull-boolean)
- [`children?: ((props: FieldRenderProps) => React.Node) | React.Node`](#children-props-fieldrenderprops--reactnode--reactnode)
- [`component?: React.ComponentType<FieldRenderProps> | string`](#component-reactcomponenttypefieldrenderprops--string)
- [`format?: ((value: any, name: string) => any) | null`](#format-value-any-name-string--any--null)
- [`formatOnBlur?: boolean`](#formatonblur-boolean)
- [`isEqual?: (a: any, b: any) => boolean`](#isequal-a-any-b-any--boolean)
- [`name: string`](#name-string)
- [`parse?: ((value: any, name: string) => any) | null`](#parse-value-any-name-string--any--null)
- [`render?: (props: FieldRenderProps) => React.Node`](#render-props-fieldrenderprops--reactnode)
- [`subscription?: FieldSubscription`](#subscription-fieldsubscription)
- [`validate?: (value: ?any, allValues: Object) => ?any`](#validate-value-any-allvalues-object--any)
- [`validateFields?: string[]`](#validatefields-string)
- [`value?: any`](#value-any)
- [`FieldRenderProps`](#fieldrenderprops)
- [`input.name: string`](#inputname-string)
- [`input.onBlur: (?SyntheticFocusEvent<*>) => void`](#inputonblur-syntheticfocusevent--void)
- [`input.onChange: (SyntheticInputEvent<*> | any) => void`](#inputonchange-syntheticinputevent--any--void)
- [`input.onFocus: (?SyntheticFocusEvent<*>) => void`](#inputonfocus-syntheticfocusevent--void)
- [`input.value: any`](#inputvalue-any)
- [`meta.active?: boolean`](#metaactive-boolean)
- [`meta.data?: Object`](#metadata-object)
- [`meta.dirty?: boolean`](#metadirty-boolean)
- [`meta.error?: any`](#metaerror-any)
- [`meta.initial?: any`](#metainitial-any)
- [`meta.invalid?: boolean`](#metainvalid-boolean)
- [`meta.pristine?: boolean`](#metapristine-boolean)
- [`meta.submitError?: any`](#metasubmiterror-any)
- [`meta.submitFailed?: boolean`](#metasubmitfailed-boolean)
- [`meta.submitSucceeded?: boolean`](#metasubmitsucceeded-boolean)
- [`meta.touched?: boolean`](#metatouched-boolean)
- [`meta.valid?: boolean`](#metavalid-boolean)
- [`meta.visited?: boolean`](#metavisited-boolean)
- [`FormProps`](#formprops)
- [`children?: ((props: FormRenderProps) => React.Node) | React.Node`](#children-props-formrenderprops--reactnode--reactnode)
- [`component?: React.ComponentType<FormRenderProps>`](#component-reactcomponenttypeformrenderprops)
- [`debug?: DebugFunction`](#debug-debugfunction)
- [`decorators?: Decorator[]`](#decorators-decorator)
- [`initialValues?: Object`](#initialvalues-object)
- [`keepDirtyOnReinitialize?: boolean`](#keepdirtyonreinitialize-boolean)
- [`mutators?: { [string]: Mutator }`](#mutators--string-mutator-)
- [`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)
- [`render?: (props: FormRenderProps) => React.Node`](#render-props-formrenderprops--reactnode)
- [`subscription?: FormSubscription`](#subscription-formsubscription)
- [`validate?: (values: Object) => Object | Promise<Object>`](#validate-values-object--object--promiseobject)
- [`validateOnBlur?: boolean`](#validateonblur-boolean)
- [`FormRenderProps`](#formrenderprops)
- [`batch: (fn: () => void) => void)`](#batch-fn---void--void)
- [`blur: (name: string) => void`](#blur-name-string--void)
- [`change: (name: string, value: any) => void`](#change-name-string-value-any--void)
- [`focus: (name: string) => void`](#focus-name-string--void)
- [`form: FormApi`](#form-formapi)
- [`handleSubmit: (?SyntheticEvent<HTMLFormElement>) => void`](#handlesubmit-syntheticeventhtmlformelement--void)
- [`initialize: (values: Object) => void`](#initialize-values-object--void)
- [`mutators?: { [string]: Function }`](#mutators--string-function-)
- [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void)
- [`FormSpyProps`](#formspyprops)
- [`children?: ((props: FormSpyRenderProps) => React.Node) | React.Node`](#children-props-formspyrenderprops--reactnode--reactnode)
- [`component?: React.ComponentType<FormSpyRenderProps>`](#component-reactcomponenttypeformspyrenderprops)
- [`onChange?: (formState: FormState) => void`](#onchange-formstate-formstate--void)
- [`render?: (props: FormSpyRenderProps) => React.Node`](#render-props-formspyrenderprops--reactnode)
- [`subscription?: FormSubscription`](#subscription-formsubscription-1)
- [`FormSpyRenderProps`](#formspyrenderprops)
- [`batch: (fn: () => void) => void)`](#batch-fn---void--void-1)
- [`blur: (name: string) => void`](#blur-name-string--void-1)
- [`change: (name: string, value: any) => void`](#change-name-string-value-any--void-1)
- [`focus: (name: string) => void`](#focus-name-string--void-1)
- [`form: FormApi`](#form-formapi-1)
- [`initialize: (values: Object) => void`](#initialize-values-object--void-1)
- [`mutators?: { [string]: Function }`](#mutators--string-function--1)
- [`reset: (newInitialValues?: Object) => void`](#reset-newinitialvalues-object--void-1)
- [Contributors](#contributors)
- [Backers](#backers)
- [Sponsors](#sponsors)

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

## Videos

| [![Next Generation Forms with 🏁 React Final Form – React Alicante 2018](docs/ReactAlicante2018.gif)](https://youtu.be/WoSzy-4mviQ) |
| :---------------------------------------------------------------------------------------------------------------------------------: |
| **Next Generation Forms with 🏁 React Final Form – React Alicante 2018** |

## Examples

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

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

* 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.
* Checkboxes:
* `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.
* 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`.
- 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.
- Checkboxes:
- `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.
- 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`.

### `FieldRenderProps`

Expand Down
Binary file added docs/ReactAlicante2018.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c6d8ae3

Please sign in to comment.