-
Notifications
You must be signed in to change notification settings - Fork 6
Home
Stijn Rogiest edited this page Feb 15, 2021
·
28 revisions
npm install --save typed-react-form
yarn add typed-react-form
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>
);
}
Tweak the basic example to your desire! Find your next step here:
- Inputs
- Object/array fields
-
Using validatorsDocumentation WIP-
Using yupDocumentation WIP
-
- Submit button that disables when unmodified/error
- Creating live updating JSON component
- Using with styled-components
- isSubmitting and custom global form state