mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-06 04:19:43 +00:00
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>
This commit is contained in:
@@ -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`
|
||||
|
||||
@@ -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>`
|
||||
|
||||
A type representing a form component.
|
||||
```tsx
|
||||
disabled: boolean
|
||||
```
|
||||
- `disabled` boolean to disable form
|
||||
|
||||
- `(props: FormProps) => any`
|
||||
- A function that takes `FormProps` as an argument and returns a form component.
|
||||
|
||||
|
||||
### 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")
|
||||
|
||||
|
||||
|
||||
```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.
|
||||
|
||||
Reference in New Issue
Block a user