TypeScript Support

React Cool Form is written in TypeScript, so the library's types will always be up-to-date. When working with TypeScript, we can define a FormValues type to support the form's values.

import { useForm } from "react-cool-form";

interface FormValues {
  firstName: string;
  lastName: string;
}

const App = () => {
  const { form } = useForm<FormValues>({
    defaultValues: {
      firstName: "Welly",
      lastName: true, // 🙅🏻‍♀️ Type "boolean" is not assignable to type "string"
    },
    onSubmit: (values) => {
      console.log("First Name: ", values.firstName);
      console.log("Middle Name: ", values.middleName); // 🙅🏻‍♀️ Property "middleName" does not exist on type "FormValues"
    },
  });

  return (
    <form ref={form}>
      <input name="firstName" />
      <input name="lastName" />
      <input type="submit" />
    </form>
  );
};

🧐 You can dig more useful types of this library to build a strongly typed form.