This library allows you to generate forms based on provided JSON configuration.
- Use your own components on the Field level (https://jaredpalmer.com/formik/docs/api/field#component).
- Flexible validation in config (using Yup).
- Conditional display logic.
- Custom options in Form level.
- Install library.
- Import package
import formGenerator from '@freenow/uniform';. - Generate form and include in your component:
const Form = formGenerator(formConfig, components); ... <Form onSubmit={/*your submit function*/} />
The formConfig is an object that contains all field definitions. Let's look at simple example:
const formConfig = {
fields: [
{
component: 'TextInput',
defaultValue: 'default',
label: 'Text input with default value',
name: 'default',
},
],
name: 'test',
};
So the config consist of fields array and name (Unique form name). Each field element can have following properties: component, defaultValue, label, name, displayConfigs, validationConfig.
The validationConfig is implemented using Yup library. In our case validation checks that the field is string and required. You can chain validation by adding elements in methods array.
const formConfig = {
fields: [
{
component: 'TextInput',
label: 'Text input with validation logic',
name: 'validation',
validationConfig: {
methods: [
{
message: 'Required',
type: 'required',
},
],
type: 'string',
},
},
],
name: 'test',
};
The displayConfigs is implemented using Yup library. In the example below we only show the "display" field when field with the name "default" has value "show". Feel free to depend on multiple fields values by adding additional element to displayConfig.
const formConfig = {
fields: [
{
component: 'TextInput',
defaultValue: 'default',
label: 'Text input with default value',
name: 'default',
},
{
component: 'TextInput',
displayConfigs: [
{
methods: [
{
compareValue: ['show'],
type: 'oneOf',
},
],
type: 'string',
valueKey: 'default',
},
],
label: 'Text input with display logic',
name: 'display',
},
],
name: 'test',
};
The component property refers to render function of each field and specified in the second paramer in generator. Let's have a look at this:
const FormContainer = ({ children, ...rest }) => (
<form {...rest}>{children}</form>
);
FormContainer.propTypes = {
children: PropTypes.node.isRequired,
};
const TextInput = ({ field, setFieldValue }) => (
<input
{...field}
onChange={e => setFieldValue(field.name, e.target.value)}
id={field && field.name}
/>
);
TextInput.propTypes = {
field: PropTypes.object.isRequired,
setFieldValue: PropTypes.func.isRequired,
};
const SubmitButton = props => <button {...props} type='submit' />;
const components = {
FormContainer,
SubmitButton,
TextInput,
};
The components object is a mapping between names and the actual components. SubmitButton and FormContainer are required to create. And TextInput will be linked to component: 'TextInput' in the form config. To create custom components for your field please follow Formik docs on the Field element.
By default, mandatory minimum test coverage of the library is set to 80%.