You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Docs] Refine language and formatting in react basic concepts guide (#1943)
* Refine language and formatting in basic concepts guide
Hey team,
These are some suggestions I have for how we could improve this page. It's mostly grammar and consistency fixes, but includes slight re-wording to improve clarity. I'm open to feedback.
* docs(form): Removed links to references and moved `isDefaultValue`
* ci: apply automated fixes and generate docs
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Copy file name to clipboardExpand all lines: docs/framework/react/guides/basic-concepts.md
+15-16Lines changed: 15 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ This page introduces the basic concepts and terminology used in the `@tanstack/r
7
7
8
8
## Form Options
9
9
10
-
You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function.
10
+
You can customize your form by creating configuration options with the `formOptions` function. These options can be shared between multiple forms.
11
11
12
12
Example:
13
13
@@ -26,7 +26,7 @@ const formOpts = formOptions({
26
26
27
27
## Form Instance
28
28
29
-
A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `useForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
29
+
A Form instance is an object that represents an individual form and provides methods and properties for working with the form. You create a Form instance using the `useForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
30
30
31
31
```tsx
32
32
const form =useForm({
@@ -38,7 +38,7 @@ const form = useForm({
38
38
})
39
39
```
40
40
41
-
You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
41
+
You may also create a Form instance without using `formOptions` by using the standalone `useForm` API:
42
42
43
43
```tsx
44
44
interfaceUser {
@@ -59,7 +59,7 @@ const form = useForm({
59
59
60
60
## Field
61
61
62
-
A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the form.Field component provided by the form instance. The component accepts a name prop, which should match a key in the form's default values. It also accepts a children prop, which is a render prop function that takes a field object as its argument.
62
+
A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `form.Field` component provided by the Form instance. The component accepts a `name` prop, which should match a key in the form's default values. It also accepts a `children` prop, which is a render prop function that takes a `field` object as its argument.
63
63
64
64
Example:
65
65
@@ -79,7 +79,7 @@ Example:
79
79
/>
80
80
```
81
81
82
-
If you run into issues handing in children as props, make sure to check your linting rules.
82
+
If you run into issues handling `children` as props, make sure to check your linting rules.
83
83
84
84
Example (ESLint):
85
85
@@ -107,12 +107,13 @@ const {
107
107
} =field.state
108
108
```
109
109
110
-
There are four states in the metadata that can be useful to see how the user interacts with a field:
110
+
There are four states in the metadata that can be useful for seeing how the user interacts with a field:
111
111
112
-
-_"isTouched"_, after the user changes the field or blurs the field
113
-
-_"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
114
-
-_"isPristine"_, until the user changes the field value. Opposite of `isDirty`
115
-
-_"isBlurred"_, after the field has been blurred
112
+
-**isTouched**: is `true` once the user changes or blurs the field
113
+
-**isDirty**: is `true` once the field's value is changed, even if it's reverted to the default. Opposite of `isPristine`
114
+
-**isPristine**: is `true` until the user changes the field's value. Opposite of `isDirty`
115
+
-**isBlurred**: is `true` once the field loses focus (is blurred)
116
+
-**isDefaultValue**: is `true` when the field's current value is the default value
-**Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
134
135
135
-
We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
136
-
137
-
-_"isDefaultValue"_, whether the field's current value is the default value
136
+
We have chosen the persistent 'dirty' state model. However, we have introduced the `isDefaultValue` flag to also support a non-persistent 'dirty' state.
// The following line will re-create the non-Persistent `dirty` functionality.
141
+
// The following line will re-create the non-persistent `dirty` functionality.
143
142
const nonPersistentIsDirty =!isDefaultValue
144
143
```
145
144
@@ -290,7 +289,7 @@ More information can be found at [Listeners](./listeners.md)
290
289
291
290
Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
292
291
293
-
When working with array fields, you can use the fields `pushValue`, `removeValue`, `swapValues` and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
292
+
When working with array fields, you can use the `pushValue`, `removeValue`, `swapValues`, and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
294
293
295
294
Example:
296
295
@@ -370,7 +369,7 @@ Example:
370
369
371
370
## Reset Buttons
372
371
373
-
When using `<button type="reset">`in conjunction with TanStack Form's `form.reset()`, you need to prevent the default HTML reset behavior to avoid unexpected resets of form elements (especially `<select>` elements) to their initial HTML values.
372
+
When using `<button type="reset">` with TanStack Form's `form.reset()`, you need to prevent the default HTML reset behavior to avoid unexpected resets of form elements (especially `<select>` elements) to their initial HTML values.
374
373
Use `event.preventDefault()` inside the button's `onClick` handler to prevent the native form reset.
0 commit comments