-
Notifications
You must be signed in to change notification settings - Fork 6
Home
Stijn Rogiest edited this page Feb 16, 2021
·
28 revisions
npm install --save typed-react-form
yarn add typed-react-form
Example of a simple type-checked form consisting of 2 fields, firstName
and lastName
.
When using FormInput
, it is required to pass the form as a prop, this is needed for type-checking.
import { useForm, FormInput } from "typed-react-form";
function BasicFormExample() {
// Use the useForm hook to create a new form state mananger. First parameter contains the default values.
const form = useForm({ firstName: "", lastName: "" });
return (
// Use normal form element
<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-checked and stateful <input />, make sure you pass form as a prop */}
{/* The name prop is type-checked! */}
<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
- Using Object fields
- Using Array fields
- Using validators
- Example: creating a submit button that disables when unmodified/error
- Example: creating a component which shows the current form values in JSON
- Usage with styled-components
- isSubmitting and custom form state
- Classes
- Hooks
- Components
- Form element components