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.

Sign up for GitHub

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

Add note to Controller documentation - FE-1221 #1064

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add note to Controller documentation - FE-1221 #1064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30f7d93
docs: add note to Controller documentation
mbrowne Apr 27, 2024
8f0218b
docs: add note to useController page as well
mbrowne Apr 28, 2024
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
2 changes: 2 additions & 0 deletions src/content/docs/usecontroller/controller.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ sidebar: apiLinks

React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as [React-Select](https://github.com/JedWatson/react-select), [AntD](https://github.com/ant-design/ant-design) and [MUI](https://mui.com/). This wrapper component will make it easier for you to work with them.

**Note:** if you simply want to control a field's value from outside the form, it's not necessary to use `Controller`. You can simply use the [`values`](/docs/useform#values) option of `useForm`.

### Props

---
Expand Down
15 changes: 10 additions & 5 deletions src/data/api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -787,11 +787,7 @@ setValue('test', '')
Set to <code>true</code> during validation.
</>
),
validatingFields: (
<>
Capture fields which are getting async validation.
</>
),
validatingFields: <>Capture fields which are getting async validation.</>,
},
errors: {
title: "errors",
Expand Down Expand Up @@ -2936,6 +2932,15 @@ const { field: checkbox } = useController({ name: 'test1' })
<code>Controller</code>. It's useful for creating reusable Controlled
input.
</p>
<p>
<strong>Note:</strong> if you simply want to control a field's value
from outside the form, it's not necessary to use{" "}
<code>useController</code>. You can simply use the{" "}
<Link href="/docs/useform#values">
<code>values</code>
</Link>{" "}
option of <code>useForm</code>.
</p>
</>
),
},
Expand Down