Skip to content

avezov/useForm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published