-
-
Notifications
You must be signed in to change notification settings - Fork 345
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: remove form.Provider and drastically improve array usage
* feat: support array notation in DeepKeys and DeepValue types * fix: support numerical values for arrays in DeepValue better * feat!: remove form.Provider from React package * chore: fix utils tests in regards to arrays * feat!: remove form.Provider from Solid package * chore!: proof of working arrays in react * chore: change Vue behavior and types * chore: fix CI, apply formatter, etc * docs: remove mention of provider from docs * chore: add test to React array usage * test: add test to Solid form * chore: fix Solid test * chore: add array test to Vue * chore: fix CI * docs: add array example to react docs * docs: improve the React basic concepts example * chore: add React array example * docs: add SolidJS example and docs * chore: add Vue example * docs: add array guide to Vue * chore: fix CI * chore: fix CI issues * Apply suggestions from code review Co-authored-by: fuko <[email protected]> --------- Co-authored-by: fuko <[email protected]>
- Loading branch information
1 parent
3d51d32
commit e833f1a
Showing
87 changed files
with
2,416 additions
and
1,233 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| --- | ||
| id: arrays | ||
| title: Arrays | ||
| --- | ||
|
|
||
| TanStack Form supports arrays as values in a form, including sub-object values inside of an array. | ||
|
|
||
| # Basic Usage | ||
|
|
||
| To use an array, you can use `field.state.value` on an array value: | ||
|
|
||
| ```jsx | ||
| function App() { | ||
| const form = useForm({ | ||
| defaultValues: { | ||
| people: [], | ||
| }, | ||
| }) | ||
|
|
||
| return ( | ||
| <form.Field name="people" mode="array"> | ||
| {(field) => ( | ||
| <div> | ||
| {field.state.value.map((_, i) => { | ||
| // ... | ||
| })} | ||
| </div> | ||
| )} | ||
| </form.Field> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| This will generate the mapped JSX every time you run `pushValue` on `field`: | ||
|
|
||
| ```jsx | ||
| <button | ||
| onClick={() => field.pushValue({ name: '', age: 0 })} | ||
| type="button" | ||
| > | ||
| Add person | ||
| </button> | ||
| ``` | ||
|
|
||
| Finally, you can use a subfield like so: | ||
|
|
||
| ```jsx | ||
| <form.Field key={i} name={`people[${i}].name`}> | ||
| {(subField) => ( | ||
| <input | ||
| value={subField.state.value} | ||
| onChange={(e) => | ||
| subField.handleChange(e.target.value) | ||
| } | ||
| /> | ||
| )} | ||
| </form.Field> | ||
| ``` | ||
|
|
||
| ## Full Example | ||
|
|
||
| ```jsx | ||
| function App() { | ||
| const form = useForm({ | ||
| defaultValues: { | ||
| people: [], | ||
| }, | ||
| onSubmit({ value }) { | ||
| alert(JSON.stringify(value)) | ||
| } | ||
| }) | ||
|
|
||
| return ( | ||
| <div> | ||
| <form | ||
| onSubmit={(e) => { | ||
| e.preventDefault() | ||
| e.stopPropagation() | ||
| void form.handleSubmit() | ||
| }} | ||
| > | ||
| <form.Field name="people"> | ||
| {(field) => { | ||
| return ( | ||
| <div> | ||
| {field.state.value.map((_, i) => { | ||
| return ( | ||
| <form.Field key={i} name={`people[${i}].name`}> | ||
| {(subField) => { | ||
| return ( | ||
| <div> | ||
| <label> | ||
| <div>Name for person {i}</div> | ||
| <input | ||
| value={subField.state.value} | ||
| onChange={(e) => | ||
| subField.handleChange(e.target.value) | ||
| } | ||
| /> | ||
| </label> | ||
| </div> | ||
| ) | ||
| }} | ||
| </form.Field> | ||
| ) | ||
| })} | ||
| <button | ||
| onClick={() => field.pushValue({ name: '', age: 0 })} | ||
| type="button" | ||
| > | ||
| Add person | ||
| </button> | ||
| </div> | ||
| ) | ||
| }} | ||
| </form.Field> | ||
| <form.Subscribe | ||
| selector={(state) => [state.canSubmit, state.isSubmitting]} | ||
| children={([canSubmit, isSubmitting]) => ( | ||
| <button type="submit" disabled={!canSubmit}> | ||
| {isSubmitting ? '...' : 'Submit'} | ||
| </button> | ||
| )} | ||
| /> | ||
| </form> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.