Creating fields
Code examples in this documentation are using field component from thereact-advanced-form-addonspackage for the illustrational purposes only. We recommend to define your own set of fields that suit your project's needs foremost.
Integration of React Advanced Form in your application begins from creating a set of reusable fields components. Those are later used to compose any form.
A field is a React component wrapped in the
createField high-order component exposed by the library. The wrapper ensures essential field functionality and allows to customize a field's behavior. It also binds internal field's state to reflect in the UI. Let's create a simple text input component:
import React from 'react'
import { createField, fieldPresets } from 'react-advanced-form'
const Input = (props) => {
/**
* "fieldProps" need to be mapped to the field element.
* "fieldState" contains the current state of a field.
*/
const { fieldProps, fieldState } = props
const { touched, errors } = fieldState
return (
<div className="input">
{/* Propagating "fieldProps" is crucial to register a field */}
<input {...fieldProps} />
{/* Render input errors underneath */}
{touched && errors && errors.map((error) => (
<div className="text--red">{error}</div>
))}
</div>
)
}
export default createField(fieldPresets.input)(Input)
There are a few important things happening in the snippet above:
- 1.Mapping
fieldPropsto the actual input element. - 2.
- 3.Using
fieldStateto reflect field state in the UI.
Take a look into the field components used internally for the integration testing of the library.
React Advanced Form can be used with any third-party field library.
Last modified 4yr ago