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
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.
Copy file name to clipboardExpand all lines: docs/framework/react/guides/basic-concepts.md
+18-14Lines changed: 18 additions & 14 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
@@ -24,9 +24,11 @@ const formOpts = formOptions({
24
24
})
25
25
```
26
26
27
+
More information about `formOptions` can be found at [FormOptions](../../../reference/interfaces/FormOptions.md)
28
+
27
29
## Form Instance
28
30
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.
31
+
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
32
31
33
```tsx
32
34
const form =useForm({
@@ -38,7 +40,7 @@ const form = useForm({
38
40
})
39
41
```
40
42
41
-
You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
43
+
You may also create a Form instance without using `formOptions` by using the standalone `useForm` API:
42
44
43
45
```tsx
44
46
interfaceUser {
@@ -59,7 +61,7 @@ const form = useForm({
59
61
60
62
## Field
61
63
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.
64
+
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
65
64
66
Example:
65
67
@@ -79,7 +81,7 @@ Example:
79
81
/>
80
82
```
81
83
82
-
If you run into issues handing in children as props, make sure to check your linting rules.
84
+
If you run into issues handling `children` as props, make sure to check your linting rules.
83
85
84
86
Example (ESLint):
85
87
@@ -107,12 +109,12 @@ const {
107
109
} =field.state
108
110
```
109
111
110
-
There are four states in the metadata that can be useful to see how the user interacts with a field:
112
+
There are four states in the metadata that can be useful for seeing how the user interacts with a field:
111
113
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
114
+
-**isTouched**: is `true` once the user changes or blurs the field
115
+
-**isDirty**: is `true` once the field's value is changed, even if it's reverted to the default. Opposite of `isPristine`
116
+
-**isPristine**: is `true`until the user changes the field's value. Opposite of `isDirty`
117
+
-**isBlurred**: is `true` once the field loses focus (is blurred)
// The following line will re-create the non-Persistent `dirty` functionality.
144
+
// The following line will re-create the non-persistent `dirty` functionality.
143
145
const nonPersistentIsDirty =!isDefaultValue
144
146
```
145
147
@@ -159,6 +161,8 @@ Example:
159
161
/>
160
162
```
161
163
164
+
More information on the Field API can be found at [FieldApi](../../../reference/classes/FieldApi#schema)
165
+
162
166
## Validation
163
167
164
168
`@tanstack/react-form` provides both synchronous and asynchronous validation out of the box. Validation functions can be passed to the `form.Field` component using the `validators` prop.
@@ -290,7 +294,7 @@ More information can be found at [Listeners](./listeners.md)
290
294
291
295
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
296
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.
297
+
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
298
295
299
Example:
296
300
@@ -370,7 +374,7 @@ Example:
370
374
371
375
## Reset Buttons
372
376
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.
377
+
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
378
Use `event.preventDefault()` inside the button's `onClick` handler to prevent the native form reset.
0 commit comments