Home

Getting started

Step 1: Install

npm install --save typed-react-form
yarn add typed-react-form

Step 2: Basic form setup

Example of a simple type-safe form consisting of 2 fields, firstName and lastName. Logs resulting object to the console on submit.

When using FormInput it is required to pass the form, this is needed for type-checking.

function BasicFormExample() {
    // Use the useForm hook to create a new form state mananger. First parameter are the default values.
    const form = useForm({ firstName: "", lastName: "" });
    return (
        <form
            onSubmit={(ev) => {
                // Prevent the form from reloading the page
                ev.preventDefault();
                // form.values contains the form values
                console.log("submit", form.values);
            }}
        >
            {/* Use FormInput to create a type-safe and stateful <input />, it is required to pass form */}
            <FormInput form={form} type="text" name="firstName" />
            <FormInput form={form} type="text" name="lastName" />

            {/* Triggers onSubmit when clicked */}
            <button>Submit</button>
        </form>
    );
}

Step 3: It's your turn

Tweak the basic example to your desire! Find your next step here:

• Inputs
  • Using FormInput, checkboxes, radio buttons
  • Using FormTextArea
  • Using FormSelect
  • Using FormError
  • Toggling a field using checkbox
  • Creating custom inputs like FormInput, FormSelect ...
• Object/array fields
  • Using Object fields
  • Using Array fields
• Using validators Documentation WIP
  • Using yup Documentation WIP
• Submit button that disables when unmodified/error
• Creating live updating JSON component
• Using with styled-components
• isSubmitting and custom global form state