@uneksija/useform

useform

React hook for simple form control

Installation

npm install @uneksija/useform

Importing the hook

import useForm from '@uneksija/useform'

Example usage

function validate({ age }) {
  if (age < 18) return { age: '18+ only' }
}

function App() {
  const { values, errors, isValid, handleChange, handleSubmit } = useForm({
    validate,
    initialValues: {
      name: 'john',
      age: 23
    },
    onSubmit: console.log
  })

  return (
    <form onSubmit={handleSubmit}>
      <label>
        name
        <input
          name="name"
          type="text"
          value={values.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        age
        <input
          name="age"
          type="number"
          value={values.age}
          onChange={handleChange}
        />
        {errors.age}
      </label>
      <br />
      <button type="submit" disabled={!isValid}>
        save
      </button>
    </form>
  )
}

Arguments

Argument	Description
initialValues	Object containing the form initial values
onSubmit	Function called with the values on form submit
validate	Validate function, returns an object of error messages

Return object

Key	Description
values	Form values
errors	Error messages
isValid	Flag indicating if there are any errors
handleChange	OnChange handler, input name needs to match value key
handleSubmit	OnSubmit handler