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.

function BasicFormExample() {
    const form = useForm({ firstName: "", lastName: "" }, { isSubmitting: false });
    return (
        <form
            onSubmit={(ev) => {
                ev.preventDefault();
                console.log("submit", form.values);
            }}
        >
            <FormInput form={form} type="text" name="firstName" />
            <FormInput form={form} type="text" name="lastName" />
            <button>Submit</button>
        </form>
    );
}

typed-react-form provides the following form elements for you:

• <FormInput />
• <FormSelect />
• <FormTextArea />
• Error message: <FormError />

All of these components are wrappers and abstractions around the useListener hook. Learn how to create your own custom form component/input here.

Step 3: Documentation

Find your next step here...