32 lines
878 B
Markdown
32 lines
878 B
Markdown
|
# The `useForm` hook
|
||
|
|
|
||
|
|
We are using [`react-hook-form`](https://react-hook-form.com/) for forms, including feature configuration or settings page
|
||
|
|
|
||
|
|
## Built-in Components
|
||
|
|
|
||
|
|
There're some common components such as `<FilePicker />` in the [src/components/forms/\*](./src/components/forms) folder
|
||
|
|
|
||
|
|
## Controller
|
||
|
|
|
||
|
|
We add `useController` into custom components so as to provides better code quality
|
||
|
|
|
||
|
|
Therefore, You don't have to wrap the inputs into the `<Controller />` component
|
||
|
|
|
||
|
|
For example, the Color picker & Switch field can be used in this way
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
<ColorPickerForm
|
||
|
|
control={{
|
||
|
|
label: 'Color',
|
||
|
|
description: 'The color of message',
|
||
|
|
}}
|
||
|
|
controller={{ control, name: 'color' }} //from the useForm hook
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
[Learn More](https://react-hook-form.com/api/usecontroller/)
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
Take a look at [here](./src/config/example/WelcomeMessageFeature.tsx) for examples
|