Another-use-form-hook NPM

⚠ WARNING! This is still in development! ⚠
I am new to many things here... semantic-release, npm publishing and TypeScript is all the stuff I haven't tried before, so please excuse me for the "messy" start. I am hoping to keep everything clean from now on... The documentation is still missing, and there are some rough edges on the inside, so please use with caution! Other than that, please enjoy! ✨💖🚀

Installation

This should be installed as one of your project dependencies:

yarn add another-use-form-hook

npm install --save another-use-form-hook

Usage

NOTE: This section is a work in progress.

This hook is intended to give a full solution for handling forms. From interdependent field value validations (meaning if a field value is dependent on anothers' values), to submitting the form, and providing information about when the UI should be unresponsive (loading of some kind of asnyc-like operation), in addition to notification "hooks" to be able to inform the users the most efficient way.

Let's see a complex example, to understand how it works, and what are its capabilities:

import React from "react"
import ReactDOM from "react-dom"
import useForm, {FormProvider} from "another-use-form-hook"

/**
 * NOTE: We are using date-fns for this example,
 * but it is absolutly not a requirement.
 */
import {addDays, isAfter, differenceInDays} from "date-fns"


const TODAY = new Date()


const App = () => {
  const form = useForm({
    name: "form",
    validators: {
      // Earliest arrival tomorrow
      arrival: ({arrival}) => isAfter(arrival, TODAY),
      // Earliest departure day after tomorrow
      departure: ({departure}) => isAfter(addDays(departure, 1), TODAY),
      // Arrival and departure depends on each other to be valid.
      minOneNight: ({arrival, departure}) => differenceInDays(departure, arrival) >= 1
    }
  })

  return (
    <form onSubmit={form.handleSubmit}>

      {/* With current (2.x) API */}

      <label htmlFor="arrival">
        { form.fields.arrival.error ? "Invalid" : "" } arrival
      </label>
      <input 
        id="arrival"
        name="arrival"
        value={form.fields.arrival.value}
        onChange={e => form.handleChange(e, ["minOneNight"])}
      />

      <label htmlFor="departure">
        { form.fields.departure.error ? "Invalid" : "" } departure
      </label>
      <input 
        id="departure"
        name="departure"
        value={form.fields.arrival.value}
        onChange={e => form.handleChange(e, ["minOneNight"])}
      />

      {/* With new API (available from 3.0) */}
      
      <label htmlFor="departure">
        { form.errors.departure ? "Invalid" : "" } departure
      </label>
      <input
        { ...form.inputs.date("departure")
        onChange={e => form.handleChange(e, ["minOneNight"])}
      />

      <label htmlFor="email">{ form.errors.email ? "Invalid" : "" } email</label>
      <input { ...form.inputs.email("email") }/>

    </form>
  )
}

ReactDOM.render(
  <FormProvider initialState={{
    form: {
      arrival: TODAY,
      departure: addDays(TODAY, 1)
    }
  }}>
    <App/>
  </FormProvider>
  , document.querySelector("#root"))