re-former

This is a library to make creating forms in React much simplier. It provides few elements which provide functionality to user.

Re-former can use external store (eg. in Redux) or keep its state in itself.

Elements

<Form>

It defines a form component in which will be created other components. There is stored a local store and it provides a context to other controls. The form allows to use any fields. There can be any nested structure. You can use traditional form attributes as in original HTML tag eg. method or target attribute. It's also available to use onSubmit method. It will be called just when validation has been finished without errors.

Properties:

| name | type | defaultValue | |--------------|----------|------------------| | method | string | GET | | target | string | undefined | | errorClass | string | error-constraint | | onSubmit | function | undefined | | validators | object | {} | | fields | object | undefined | | updateFields | function | undefined | | addNewField | function | undefined |

• method - it is HTTP method being used to send the form.
• target - if this argument is not defined, then any HTTP method will be used to send it. You can send it manually eg. using AJAX in your onSubmit() handler.
• errorClass - the class which will be assigned to a form control when its validation rules are not satisfied.
• onSubmit() - this method takes fields object as its parameter. It's being called only when validation has been finished successfully.
• fields - fields object which is provided to the form from external place.
• updateFields - method being used to update fields object in external place.
• addNewField - method being used to add new field to external fields object.

<Field>

Wrapper to set validation rules to included form control. It should contain only HTML input and optionally error message container. If you use other library to create more complicated input controls, then you can use value and onChange properties which are injected by Field component to its children.

Properties:

| name | type | defaultValue | |--------------|--------------|--------------| | rules | array|string | undefined | | includeError | boolean | false |

• rules - this array includes rules which are applied to the field. All of them will be checked until validation process. More details below.
• includeError - a flag to specify if <ErrorMessage> should be automatically rendered for this field after a form control.

<ErrorMessage>

It displays error messages for single field. In single component can be displayed one or more errors.

Properties:

| name | type | defaultValue | |-----------|--------|-----------------| | className | string | "error-message" | | htmlFor | string | <parent_field> |

• className - class which is applied to <ErrorMessage> component. You can use it to specify special CSS styles.
• htmlFor - it informs which field errors are displayed in the component. Automatically there will be displayed errors coming from the same field. However, it's possible to display errors in different places.

<ErrorList>

It displays all errors which has been occured in any field.

Properties:

| name | type | defaultValue | |-----------|--------|--------------| | className | string | "error-list" |

• className - class which is applied to <ErrorList> component. You can use it to specify special CSS styles.

<Submit>

It provides a submit button fully integrated with other part of the library. It takes the same parameters as HTML input tag, but text of button is taken as a child.

External data

In basic usage the form has its own store to keep fields data. You can also use external store eg. Redux. All what you need is just pass tree parameters to the Form component:

• fields,
• updateFields,
• addNewField.

The first one is an object and the two others are methods.

Fields object

Keys of the fields object are names of fields. It allows to find data of single one in easy way. Every value there is an object with fields:

• type (string) - type of the field; it has similar value to 'type' attribute of input field, additionally including 'textarea' type. If there is other type, the value will be set as undefined;
• name (string) - it is a name of field; it identifies field in the form; if you don not specify name attribute in a child of Field component, then it will be randomly chosen;
• value (mixed) - value of field; it can be everything but if you use traditional HTTP form sending, then it should be serializable to string value;
• rules (array|string) - it can be an array or string with list of rules which are applicable to the field; more information about it is located in description of Field component;
• edited (string) - a flag which informs if the field has been edited;
• errors (array) - a list of error messages which are found already; it's being refreshed after validation process; no messages means no errors;
• errorClass (string) - class which will be assigned to input fields if value of it doesn't satisfy its rules;