Customization
When working with forms HTML elements are seldom enough to create beatufil and intuitive UI's.
That's why react-fluent-form
was build to be customizable, so custom field types can be added.
In some cases it's enought to use field.raw
(s. below).
If you maybe have your own validation library or you just don't like yup
, also a custom validator can be provided.
Using the raw field
For components like react-datepicker
it's not necessary to implement a custom field.
react-fluent-form
comes with a raw field type which works for components with following characteristics:
- it has
value
-like and aonChange
-like prop value
has the same type as the first parameter ofonChange
handler- it optionally has a
onBlur
-like prop to indicate when the field is touched
*-like means it must not have the same name, but the same type. E.g. the value
prop in react-datepicker
is called selected
.
For raw fields it's required to pass an initial value, otherwise it will be undefined.
The type of fields
object would look like this:
Adding custom fields
First of all a new class needs to be implemented which extends Fields
, the base class of every field. It's required to implement a function called mapToComponentProps
which receives a parameter with following properties:
value: ValueType
: the current value stored in state ofuseFluentForm
. Map this to the value prop of your component.setValue(v: ValueType)
: whenever your component changed its value, this function should be called (often it's anonChange
-like event)setTouched(value: boolean = true)
: call this function when your component has been touched. For most cases this function should be called when theonBlur
event was triggered.
Imagine you have implemented a custom input field that has an additional prop called onClear
which is called when the input should be cleared. On top of that you have an option to disable this functionality using the clearable
prop:
For convenience purposes there is also a utility function named addField
that adds a custom field to the field
instance exported by react-fluent-form
(which is actually adding a new function to FieldCreator.prototype
). addField
should be called in a top level file:
The newly added field can then be used e.g. like so:
Adding custom validator
To add a custom validator a class need to be implemented which extends Validator
. The only function that needs to be implemented is validateField
, which is called with following parameters:
field: KeyType
: name of the field that should be validatedvalues: ValuesType
: current values of the formcontext: object
: current context value
For the sake of simplicity lets assume you just want to have an optional required check on your fields. An implementation could look like following:
Using withCustomValidator
a custom validator can be added to your form config:
caution
Attaching a custom validator will remove the DefaultValidator
.