TanStack Form Demo

Learn how to integrate IC Reactor with TanStack Form to create powerful, type-safe forms that interact directly with your Internet Computer canisters.

Features Demonstrated

• Type-Safe Forms: Form fields are typed based on your Candid definitions.
• Validation: Client-side validation before sending data to the canister.
• Loading States: Managing submission states and button feedback.
• Error Handling: Mapping canister errors back to form fields.

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Implementation

const { mutateAsync } = useActorMutation({ functionName: "update_profile" })

const form = useForm({
  defaultValues: {
    username: "",
    bio: "",
  },
  onSubmit: async ({ value }) => {
    await mutateAsync([value])
  },
})

return (
  <form
    onSubmit={(e) => {
      e.preventDefault()
      form.handleSubmit()
    }}
  >
    <form.Field
      name="username"
      children={(field) => (
        <input
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      )}
    />
    <button type="submit">Update Profile</button>
  </form>
)