fielder
Version:
A field-first form library for React and React Native
72 lines (45 loc) • 1.38 kB
text/mdx
# useSubmit
_Hook to guard submission logic and trigger a submission [validation event](/guides/validation#validation-events)._
```tsx
import { useSubmit } from 'fielder';
```
## Example usage
```tsx
const { handleSubmit } = useSubmit((values) => {
fetch('/submit-form', {
method: 'POST',
body: JSON.stringify(values),
});
});
return <button onClick={handleSubmit}>Submit</button>;
```
## Return type
An object containing the following properties:
### isValidating
Indicator of whether async `submit` validation event is in progress.
Type: `boolean`
### hasSubmitted
Indicator of whether `handleSubmit` function has been called.
Type: `boolean`
### handleSubmit
Guarded submit function which triggers `submit` validation on call.
Type: `() => void`
## Arguments
_useSubmit_ takes a single function as an argument.
### fn **(required)**
The function to be called on submission validation success.
Type: `(f: Record<K, V>) => void`
Example: `(values) => console.log(values)`
## Types
### UseSubmitResponse
Return type of a `useSubmit` call.
```ts
type UseSubmitResponse = {
/** Guarded submit function which triggers `submit` validation on call. */
handleSubmit: () => void;
/** Indicates if async fetching is in progress. */
isValidating: boolean;
/** Indicates if `handleSubmit` has been called. */
hasSubmitted: boolean;
};
```