Quick Start

A simple and basic controlled hook form. Aiming to create forms with minimal effort.


Features

  • Controlled form.
  • Possibility of using class as default form data (see more Default Values).
  • No native validation. The entire validation is up to the developer.
  • Simple to use with existing HTML form inputs and 3rd-party UI libraries.
  • Build with typescript.
  • Easy to use in react and react-native.

Installation

Install using Yarn:

yarn add @resourge/react-form

or NPM:

npm install @resourge/react-form --save

Example

For a example, you can follow the code below:

import { useForm } from '@resourge/react-form'

function App() {
  const {
    form,
    isTouched,
    isValid,
    field,
    handleSubmit
  } = useForm(
    {
      productName: ''
    },
    {
      // Form validation
      // @resourge/schema recommended use
      validate: () => []
    }
  )
  
  const onSubmit = handleSubmit((form) => {
    console.log('form', form)
    // Send it to backend
  })
  
  return (
    <div>
      <button 
        onClick={onSubmit}
      >
        Submit
      </button>
      <div>
        <label>
          Product Name
        </label>
        <input { ...field('productName')} />
      </div>
    </div>
  )
}
💡

Note: Wrapping the form fields with <form></form> is optional.