React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • FAQ
  • Getting started
    • Installation
    • Creating fields
    • Creating form
    • Validation rules
    • Validation messages
    • Applying validation
    • Handle submit
  • Architecture
    • Argument properties
    • Referencing
    • Field lifecycle
    • Controlled fields
    • Reactive props
  • Validation
    • Getting started
    • Validation schema
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Specification
  • Props
  • Example
  1. Components

FormProvider

Specification

A provider component that propagates application-wide form settings to all children forms.

Props

Prop name

Type

Default value

Description

rules

undefined

Validation rules schema.

messages

unedfined

Validation messages.

debounceTime

number

250

Custom debounce duration (ms) for onChange field validation.

Example

Render the <FormProvider> on the root-level of your application (alongside the other providers you may have):

import React from 'react'
import { FormProvider } from 'react-advanced-form'

const App = ({ children }) => (
  <FormProvider rules={validationRules} messages={validationMessages}>
    {children}
  </FormProvider>
)

PreviousExposed propsNextForm

Last updated 6 years ago

ValidationSchema
[ValidationMessages: Object]