fielder
Version:
A field-first form library for React and React Native
38 lines (27 loc) • 947 B
text/mdx
_Handling submission and/or progression in a form._
The `useSubmit` hook can be used to guard submission logic and trigger `submit` validation.
> The provided function will not be called until `submit` validation succeeds.
```tsx
const { handleSubmit } = useSubmit((values) => {
fetch('/submit-form', {
method: 'POST',
body: JSON.stringify(values),
});
});
return <button onClick={handleSubmit}>Submit</button>;
```
The `useSubmit` hook also provides state indicating whether async submit logic is in progress and whether the provided `handleSubmit` function has been called.
```tsx
const [fieldProps, fieldMeta] = useField(/* ... */);
const { isValidating, hasSubmitted } = useSubmit(/* ... */);
return (
<div>
<input type="text" {...fieldProps} />
{hasSubmitted && fieldMeta.error}
<button>{isValidating ? <Spinner /> : 'Submit'}</button>;
</div>
);
```