Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: removed old docs and updated the docs of useForm in react #434

Merged
merged 3 commits into from
Oct 18, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 53 additions & 12 deletions docs/framework/react/reference/useForm.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,12 @@ title: useForm
### `useForm`

```tsx
export function useForm<TData>(
opts?: FormOptions<TData> & { listen?: (state: FormState<TData>) => any },
): FormApi<TData>
export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>
```
A custom react hook that returns an instance of the `FormApi<TData>` class.
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

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

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

### `FormProps`

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

### `FormComponent`
```tsx
onSubmit: (e: FormSubmitEvent) => void
```
- `onSubmit` function of type `FormSubmitEvent = React.FormEvent<HTMLFormElement>`

```tsx
disabled: boolean
```
- `disabled` boolean to disable form



### Return value of `UseForm` is `FormApi<TFormData>`

- The `FormApi` contains the following properties

```tsx
Provider: (props: { children: any }) => any
```
- React provider use to wrap your components
- Reference React [ContextProvider]("https://react.dev/reference/react/createContext#provider")


A type representing a form component.

- `(props: FormProps) => any`
- A function that takes `FormProps` as an argument and returns a form component.
```tsx
Field: FieldComponent<TFormData, TFormData>getFormProps: () => FormProps
```
- A React component to render form fields. With this, you can render and manage individual form fields.

```tsx
useField: UseField<TFormData>
```
- 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.


```tsx
useStore: <TSelected = NoInfer<FormState<TFormData>>>(
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
) => TSelected
```
- 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


```tsx
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
children:
| ((state: NoInfer<TSelected>) => React.ReactNode)
| React.ReactNode
}) => any
```
- 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.