Skip to content

Commit b35ecd1

Browse files
docs: removed old docs and updated the docs of useForm in react (#434)
* docs: removed old docs and updated the docs of useForm in react * chore: updated docs for react-use-form --------- Co-authored-by: Corbin Crutchley <git@crutchcorn.dev>
1 parent b2b9b0a commit b35ecd1

File tree

1 file changed

+53
-12
lines changed

1 file changed

+53
-12
lines changed

docs/framework/react/reference/useForm.md

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,12 @@ title: useForm
66
### `useForm`
77

88
```tsx
9-
export function useForm<TData>(
10-
opts?: FormOptions<TData> & { listen?: (state: FormState<TData>) => any },
11-
): FormApi<TData>
9+
export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>
1210
```
11+
A custom react hook that returns an instance of the `FormApi<TData>` class.
12+
This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields
1313

14-
A custom hook that returns an instance of the `FormApi<TData>` class.
1514

16-
- `opts`
17-
- Optional form options and a `listen` function to be called with the form state.
1815

1916
### `FormProps`
2017

@@ -23,12 +20,56 @@ An object type representing the form component props.
2320
- Inherits from `React.HTMLProps<HTMLFormElement>`.
2421
- `children: React.ReactNode`
2522
- The form's child elements.
26-
- `noFormElement?: boolean`
27-
- If true, the form component will not render an HTML form element.
2823

29-
### `FormComponent`
24+
```tsx
25+
onSubmit: (e: FormSubmitEvent) => void
26+
```
27+
- `onSubmit` function of type `FormSubmitEvent = React.FormEvent<HTMLFormElement>`
28+
29+
```tsx
30+
disabled: boolean
31+
```
32+
- `disabled` boolean to disable form
33+
34+
35+
36+
### Return value of `UseForm` is `FormApi<TFormData>`
37+
38+
- The `FormApi` contains the following properties
39+
40+
```tsx
41+
Provider: (props: { children: any }) => any
42+
```
43+
- React provider use to wrap your components
44+
- Reference React [ContextProvider]("https://react.dev/reference/react/createContext#provider")
45+
3046

31-
A type representing a form component.
3247

33-
- `(props: FormProps) => any`
34-
- A function that takes `FormProps` as an argument and returns a form component.
48+
```tsx
49+
Field: FieldComponent<TFormData, TFormData>getFormProps: () => FormProps
50+
```
51+
- A React component to render form fields. With this, you can render and manage individual form fields.
52+
53+
```tsx
54+
useField: UseField<TFormData>
55+
```
56+
- A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
57+
58+
59+
```tsx
60+
useStore: <TSelected = NoInfer<FormState<TFormData>>>(
61+
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
62+
) => TSelected
63+
```
64+
- a `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
65+
66+
67+
```tsx
68+
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
69+
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
70+
children:
71+
| ((state: NoInfer<TSelected>) => React.ReactNode)
72+
| React.ReactNode
73+
}) => any
74+
```
75+
- a `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.

0 commit comments

Comments
 (0)