Field presets

Presets contain pre-defined createField options relevant to the respective field type. Those options ensure proper field behavior as well as automatically map essential form element's props (i.e. placeholder, multiselect, etc.) from the wrapped component to the actual form element.
Presets are designed for seamless integration of common field types. For the custom fields you may want to consider writing your own presets or extending the existing ones.
Presets list
There are field presets for all common field types. Those should provide a sensible defaults, therefore it is recommended to use them when declaring a respective field component.
fieldPresets.input
fieldPresets.textarea
fieldPresets.checkbox
fieldPresets.select
fieldPresets.radio
Example
Basic
1
import React from 'react'
2
import { createField, fieldPresets } from 'react-advanced-form'
3
​
4
const Select = ({ children, fieldProps }) => (
5
  <select {...fieldProps}>
6
    {children}
7
  </select>
8
)
9
​
10
export default createField(fieldPresets.select)(Select)
Copied!
Extending a preset
1
import React from 'react'
2
import { createField, fieldPresets } from 'react-advanced-form'
3
​
4
const DateSelect = ({ children, fieldProps }) => (
5
  <select {...fieldProps}>
6
    {children}
7
  </select>
8
)
9
​
10
export default createField({
11
  ...fieldPresets.select,
12
  valuePropName: 'selectedDate',
13
})(DateSelect)
Copied!

Options

Exposed props

Last modified 3yr ago

Copy link

Contents