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
  • Example
  1. High-order components

createField

PreviousValidation messagesNextOptions

Last updated 6 years ago

Specification

A high-order component which enhances the provided custom component (WrappedComponent) to behave as React Advanced Form field. When being wrapped, all component interactions are handled by the parent Form automatically, exposing the internal field props and field state to the wrapped component.

createField is designed for both field styling and custom fields implementation.

It is important to understand the before creating custom fields. This will significantly reduce the amount of questions and increase the developer's experience.

Example

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

class CustomField extends React.Component {
  render() {
    const { fieldProps } = this.props

    return (<MyComponent {...fieldProps} />)
  }
}

export default createField({...})(CustomField)

It's crucial to propagate the CustomComponent.props.fieldProps to MyComponent for it to have the essential props and event handlers of the native field.

Field lifecycle