react-modulr-forms

This library aims at solving the issues of complex forms in an extensible way. It allows multiple types of validation and arranging forms inn any way you see fit. It allows plugin any external library into it's validation process to prevent form submission or display errors in a unified manner.

Components

ModularForm

The ModularForm component will wrap our FormField elements, it simply has an id prop that will be referenced by each field. It can wrap its elements but any element outside of the form will also be registered as long as it holds the correct formId.

1import { ModularForm } from 'react-modular-forms';
2const formId = 'my-form';
3<ModularForm id={formId}>
4
5</ModularForm>

ModularFormField

The ModularFormField is used to render any form field element. It must have a formId prop to reference it's parent form and either a name or an id prop.

If you need to pass a class to the input field or the inner component you can use the innerClassName prop.

1
2Every native HTML form field element should be supported out of the box.
3```TSX
4const formId = 'my-form';
5<ModularForm id={formId}>
6    
7    <ModularFormField formId={formId} name="email" type="email" />
8
9</ModularForm>

Validation

Validation is implemented by providing the validation prop to ModularFormField components.

1
2export type ValidationType = {
3  required?: boolean;
4  /**
5   * If field valued doesn't match RegExp in negativeRegExps the error string will be displayed
6   */
7  negativeRegExps?: { [error: string]: RegExp };
8  /**
9   * If field valued  matches RegExp in positiveRegExps the error string will be displayed
10   */
11  positiveRegExps?: { [error: string]: RegExp };
12  /**
13   * A custom validator function, should return an error string if value isn't valid or null if it is
14   */
15  validator?: (value: any) => string | null;
16  validateOnBlur?: boolean;
17  /**
18   * The group prop allows the form to validate multiple fields
19   */
20  group?: string;
21  /**
22   * groupMin tells the form how many fields in the group must be valid for the form to be submitted
23   */
24  groupMin?: number;
25};

Registering new components with registerType

The registerType helper allows you to register external libraries or custom components as form fields. If you for example wanted to register react-select as component:

1import React from 'react';
2import Select from 'react-select';
3
4const ReactSelectWrapper = ({ name, value: _value, onChange, componentRef,...props }: FieldComponentProps) => {
5    const [value, setValue] = useState<any>(_value);
6
7    useEffect(() => {
8        componentRef.current = value;
9    }, []);
10    return (
11        <Select
12            name={Array.isArray(name) ? name.join('.') : name}
13            value={value}
14            onChange={(option) => {
15                setValue(option);
16                componentRef.current = option.value;
17                onChange(null, option.value);
18                return option;
19            }}
20            {...props}
21        />
22    );
23};
24
25registerType('react-select', {
26    Component: ReactSelectWrapper,
27    getValue: (ref: RefObject<string | undefined>) => ref.current
28});
29

When registering custom form field types, you should ensure events methods are handled on the component for validation to be properly handled. You can use the componentRef or the setComponentRef props to give the library something to access the field's value. This ref will be passed to the getValue function that will be used to validate the field.

1{
2  onChange?: (e: unknown, ...any: any[]) => void;
3  onBlur?: (e: React.SyntheticEvent) => void;
4  onFocus?: (e: React.SyntheticEvent) => void;
5  componentRef: React.MutableRefObject<any>;
6  setComponentRef: (value: any) => RefObject<any>;
7}

Using registerType to register complex types without adding validation hooks

If you wish to create ModularFormField types without adding validation hook you can use the isStatic boolean option of the registerType function. This will prevent the logic from being implemented twice if the components referenced are already ModularFormFields. This will allow the creation of complex fields with ease or even group multiple fields into a single component.

1registerType('address-fields', {
2    Component: ({ formId, prefix }: FieldComponentProps & { prefix: string}) => {
3        return <>
4            <ModularFormField formId={formId} type="text" name={`${prefix}address`} label="Address" validation={{required: true}} />
5            <ModularFormField formId={formId} type="text" name={`${prefix}city`} label="City" validation={{required: true}}  />
6            <ModularFormField formId={formId} type="tel" name={`${prefix}zipcode`} label="Zipcode" validation={{required: true}}  />
7            <ModularFormField formId={formId} type="text" name={`${prefix}country`} label="Country" validation={{required: true}}  />
8        </>
9    },
10    isStatic: true
11});