Exposed props

Wrapping a React component in createField high-order component automatically exposes the properties listed below. These properties can be used for field styling and custom logic or behavior.

Props list

Prop name	Type	Description
fieldProps	Object	Object of essential props for the primitive field components (i.e. input, select, textarea, etc).
fieldState	Object	Object representing a field's state.

fieldProps are composed from the fieldState and are exposed separately to ease the process of props assignment to the form elements.

fieldState

Object representing a field's state.

General

Prop name	Type	Description
touched	boolean	Indicates whether the field has been interacted with.
required	boolean	Indicates whether the field is required.
disabled	boolean	Indicates whether the field is disabled.
skip	boolean	Indicates whether the field should be skipped during any serialization process. Read more about Field.props.skip.

Validity state

Prop name	Type	Description
valid	boolean	Indicates whether the field has passed all the validations.
invalid	boolean	Indicates whether the field has not passed all the validations.

Validation

Prop name	Type	Description
validating	boolean	Indicates whether the field is being validated at the moment.
errors	string[]	Collection of the validation errors relative to the fields at the given point of time.
validated	boolean	Indicates that the field has been validated, regardless of the validation type and status.
validatedSync	boolean	Indicates whether the field has been validated synchronously.
validSync	boolean	Indicates whether the field is valid relatively to its synchronous validation rules.
validatedAsync	boolean	Indicates whether the field has been validated asynchronously.
validAsync	boolean	Indicates whether the field is valid relatively to its asynchronous validation rules.

Example

Exposed props can be accessed in this.props of your component.

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

class CustomField extends React.Component {
  render() {
    const { fieldProps, fieldState } = this.props
    const { valid, invalid, errors } = fieldState

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

export default createField()(CustomField)