@xvii/useform NPM

@xvii/useForm

Forms for ReactJS.

Installation

npm install --save @xvii/useform

Example

import { useForm } from '@xvii/useform';

const form = useForm({
  onSubmit(formData) {
    console.log("Submit", formData);
  },
  fields: {
    login: {
      valueType: String(),
      validators: [
        notEmpty({ errorText: "Login cannot be empty" }),
        minLength({
          errorText: "The login must be longer than 3 characters.",
          minLength: 3,
        }),
      ],
      validateOnChange: true
    },
    password: {
      defaultValue: "",
      validators: [notEmpty({ errorText: "Password cannot be empty" })],
    },
    remember: {
      defaultValue: false,
      valueType: Boolean(),
    },
  },
});

<TextField
  label="Login"
  error={form.fields.login?.error}
  helperText={form.fields.login?.errorText}
  onChange={form.fields.login?.handleChange}
  value={form.fields.login?.value}
/>

<Checkbox
  checked={form.fields.remember?.value}
  onChange={form.fields.remember?.toggle}
/>

Form

Property	Type	Description
fields	FormField	List of form fields
getFormData	() => data	Returns an object with values of all fields
handleSubmit	() => boolean	Handler function for submitting the form
isValid	boolean	The current validity status of all fields
setFormData	(data) => void	Sets the values of the form fields
validate	() => void	Force validation of all fields

FormField

Property	Type	Description
error	boolean	Validation error state
errorText	string	Description of error
handleChange	(evt) => void	Handler for `onChange`
pushToArray	(value) => void	Add value for arrayable fields
removeFromArray	(value) => void	Remove value from arrayable fields
replaceValidators	() => void	Replace validators for current field
setValue	(value) => void	Set value of field
toggle	() => void	Toggler for boolean values
validate	() => void	Force validation of field
value		Value of field