Skip to content

Home

Jump to bottom
Stijn Rogiest edited this page Feb 13, 2021 · 28 revisions

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:

Clone this wiki locally