Creating fields
Code examples in this documentation are using field component from the
react-advanced-form-addons
package 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.
Implementation
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:
There are a few important things happening in the snippet above:
Mapping
fieldProps
to the actual input element.Using
fieldPresets.input
preset to have essential options for the input element.Using
fieldState
to reflect field state in the UI.
Examples
Take a look into the field components used internally for the integration testing of the library.
Common
Third-party
React Advanced Form can be used with any third-party field library.
Last updated