useForm (lite)

Features

• Easily manage the state of your forms
• Re-render the component only when needed
• Type-safety and automatic transformation of form values
  • The value of number, checkbox and date inputs are transformed to number, boolean and Date respectively
• Simplicity (it doesn't do that much for now lol)

Installation

1$ npm i use-form-lite

Usage

1import useForm from "use-form-lite";
2
3type Props = {
4  onSubmit: (transaction: Transaction) => void;
5};
6
7export default function AddTransactionForm({ onSubmit }: Props) {
8  const { value, handleChange, handleSubmit } = useForm<Transaction>({
9    initialValue: {
10      type: "EXPENSE",
11      title: "Food",
12      amount: 50_000,
13    },
14
15    // transaction is of type Transaction:
16    onSubmit(transaction) {
17      onSubmit(transaction);
18    },
19    // Could also just be:
20    // onSubmit,
21
22    // If you don't wan't to manually enable re-rendering on every field:
23    // renderAllChanges: true,
24  });
25
26  return (
27    <form onSubmit={handleSubmit}>
28      <div>
29        <label htmlFor="type">Type</label>
30        {/*
31          Since this field is used for conditional rendering below,
32          we need to re-render every change (that's why `{ render: true }`)
33        */}
34        <select
35          id="type"
36          defaultValue={value.type}
37          onChange={handleChange("type", { render: true })}
38        >
39          <option value="EXPENSE">Expense</option>
40          <option value="INCOME">Income</option>
41        </select>
42      </div>
43
44      <div>
45        <label htmlFor="title">Title</label>
46        <input
47          type="text"
48          id="title"
49          defaultValue={value.title}
50          onChange={handleChange("title")}
51        />
52      </div>
53
54      <div>
55        <label htmlFor="amount">Amount</label>
56        <input
57          type="number"
58          id="amount"
59          min={0}
60          defaultValue={value.amount}
61          onChange={handleChange("amount")}
62        />
63      </div>
64
65      {value.type === "EXPENSE" && <p>Remember to save money!</p>}
66
67      <div>
68        <button>Add transaction</button>
69      </div>
70    </form>
71  );
72}

TODO

• (!) Testing
• (?) Validation by allowing the integration of external libraries
• (?) Move index.d.ts to dist/

License

MIT