@rounik/react-form-builder

<FormRoot />

Use to create the form

Contains the main form state and provides through the Context API methods for imperatively setting values, errors as well as to change back and forth the touched state of the fields. It also contains the state snapshots used to reset the form or some nested form objects.

<FormObject />

Use to group fields and create a nested object inside the form state

This component has no markup, instead it receives the state of the underlying fields or/and FormObject-s/FormArray-s and then propagates it to its parent FormObject, FormArray or the FormRoot itself. A reset on a FormObject level is possible, as well as validation of its state.

<FormArray<T> />

Use to list FormObjects and create an array inside the form state

This component has no markup, instead it takes care to gather the state of the underlying FormObject-s and then propagate it to its parent FormObject, or the FormRoot itself. You can validate its state. It has a generic type corresponding to the type of object that we iterate on.

<FormUser />

Use to access form state and methods

Uses function as children pattern. Provides the root form state and methods as well as the methods of its first parent FormObject or FormArray.

<ConditionalFields />

Use to render fields conditionally

Renders its children conditionally based on the return value of the condition prop function.

<ForceValidate />

Use to touch all fields on mount;

Depending on a condition it triggers instant touching of each field inside the form. Use this to show all errors instantly.

<FormSideEffect />

Use to execute a callback on selected form values update

Uses a dependency extractor to listen for changes on specific fields values and executes a callback. The callback receives the dependency values and the closest form context as well as the form root methods.

<FormStorageProvider />

Use to store the state of some wrapped forms.

Provides storage for form state by form id. Provides also methods for setting the state, resetting it and deleting form state. Use this to create forms with steps, where each step is a form by itself. This provider will let you navigate between the steps (the forms) while keeping their state.

useField<T>()

Use inside your field components to make them communicate with the form.

Use this hook inside your field components. It will return data and methods to help you wire-up your component and sync its value and UI state with the form. You can use it to make your own inputs from scratch or to wire-up inputs from 3-rd party packages. It takes a generic that corresponds to the type of the value that the given input is providing.

useFieldDependency()

Use inside your field components to make them use dependency based UI properties like disabled, label and required status.

Use this hook inside your field components. This hook builds upon the useField by accepting the dependency value and optional disabled, label and required properties as primitives or functions accepting the dependency value and returning primitives.

useForm()

Use to access the state and methods of the closest form context.

Returns the state and methods of the closest FormObject, FormArray or the FormRoot itself if it is the closest parent.

useFormRoot()

Use to access the state and methods of the root form context.

Returns the state and methods of the FormRoot.

FormatterModel { }

Use to ease your work with formatters

Class with static helper methods that you can use to improve your formatting experience.

ValidatorModel { }

Use to ease your work with validators

Class with static helper methods that you can use to improve your validating experience.