import React, { useState } from 'react';
import MasterForm from 'masterform';
const Form = () => {
const [formState, setFormState] = useState({
username: 'Mark', // keys in formState are from the name prop
birthday: null, // passed to the different form fields
});
return (
<MasterForm formState={formState} setFormState={setFormState}>
<MasterForm.TextInput name={'username'} label={'Username'} />
<div>
{'Display anything in between form fields'}
<MasterForm.DateTimePicker name={'birthday'} label={'Birthday'} />
</div>
</MasterForm>
);
};
export default Form;
A section can contain other form fields as children. Use this to divide a large form into sections for a cleaner UI.
Prop
Required
Default
Description
name
No
null
If supplied, form fields within the section will store their values in a JSON key with this name, inside the main formState
value
No
{}
If name is supplied, form fields within the section will use this JSON for their initial values
title
No
null
Title of the section
label
No
null
Alternative to title
disabled
No
false
Is field disabled (not editable)
style
No
{}
Style of the section container
titleStyle
No
{}
Style of the section title
labelStyle
No
{}
Style of the section label
RepeatingRow
TODO
SubmitButton
A round button that validates all form fields when clicked. onClick is only called when all fields are valid.
Prop
Required
Default
Description
name
No
'masterFormSubmitButton'
Name of the field. Used as key in the form state
label
No
'SUBMIT'
Label of the button
disabled
No
false
Is field disabled (not editable)
onClick
No
null
Function receives formState, areAllFieldsValid and validateAllFields function
onPress
No
null
Alternative to onClick
noValidation
No
false
Call onClick without any validation
skipValidation
No
false
Call onClick but do validation also
color
No
'orange'
red, orange, green, blue, purple, white, gray, black
inverted
No
false
Switch button and label colors
style
No
{}
Style of the button
labelStyle
No
{}
Style of the button label
Form validation
Each field has validators prop which is an array of validation functions and their corresponding error messages.
validators = [
{
function: (value, formState) => value.length >= 10, // error is displayed if this returns false
errorLabel: 'At least 10 characters are required',
},
];
Each function receives the current value of the field and the complete formState. If the function returns false, the errorLabel is displayed below the field.
