Skip to content

Commit

Permalink
Showing 3 changed files with 140 additions and 124 deletions.
259 changes: 135 additions & 124 deletions examples/react/simple/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { FieldApi, createFormFactory, useField } from "@tanstack/react-form";
import { FieldApi, createFormFactory } from "@tanstack/react-form";

type Person = {
firstName: string;
@@ -41,137 +41,148 @@ export default function App() {
},
});

const [count, setCount] = React.useState(0);

return (
<div>
<button onClick={() => setCount((prev) => prev + 1)}>{count}</button>
<h1>Simple Form Example</h1>
{/* A pre-bound form component */}
<form {...form.getFormProps()}>
<div>
{/* A type-safe and pre-bound field component*/}
<form.Field
name="firstName"
validate={(value) => !value && "A first name is required"}
validateAsyncOn="change"
validateAsyncDebounceMs={500}
validateAsync={async (value) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
return (
value.includes("error") && 'No "error" allowed in first name'
);
}}
children={(field) => (
// Avoid hasty abstractions. Render props are great!
<>
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
)}
/>
</div>
<div>
<form.Field
name="lastName"
children={(field) => (
<>
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
)}
/>
</div>
<div>
<form.Field
name="hobbies"
mode="array"
children={(hobbiesField) => (
<div>
Hobbies
<div
style={{
paddingLeft: "1rem",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
{!hobbiesField.state.value.length
? "No hobbies found."
: hobbiesField.state.value.map((_, i) => (
<div
key={i}
style={{
borderLeft: "2px solid gray",
paddingLeft: ".5rem",
}}
>
<hobbiesField.Field
index={i}
name="name"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>Name:</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<button
type="button"
onClick={() => hobbiesField.removeValue(i)}
>
X
</button>
<FieldInfo field={field} />
</div>
);
}}
/>
<hobbiesField.Field
index={i}
name="description"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>
Description:
</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<FieldInfo field={field} />
</div>
);
<form.Provider>
<form {...form.getFormProps()}>
<div>
{/* A type-safe and pre-bound field component*/}
<form.Field
name="firstName"
validateOn="change"
validate={(value) => !value && "A first name is required"}
validateAsyncOn="change"
validateAsyncDebounceMs={500}
validateAsync={async (value) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
return (
value.includes("error") && 'No "error" allowed in first name'
);
}}
children={(field) => {
// Avoid hasty abstractions. Render props are great!
return (
<>
<input placeholder="uncontrolled" />
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
);
}}
/>
</div>
<div>
<form.Field
name="lastName"
children={(field) => (
<>
<input {...field.getInputProps()} />
<FieldInfo field={field} />
</>
)}
/>
</div>
<div>
<form.Field
name="hobbies"
mode="array"
children={(hobbiesField) => (
<div>
Hobbies
<div
style={{
paddingLeft: "1rem",
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
{!hobbiesField.state.value.length
? "No hobbies found."
: hobbiesField.state.value.map((_, i) => (
<div
key={i}
style={{
borderLeft: "2px solid gray",
paddingLeft: ".5rem",
}}
/>
</div>
))}
>
<hobbiesField.Field
index={i}
name="name"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>Name:</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<button
type="button"
onClick={() =>
hobbiesField.removeValue(i)
}
>
X
</button>
<FieldInfo field={field} />
</div>
);
}}
/>
<hobbiesField.Field
index={i}
name="description"
children={(field) => {
return (
<div>
<label htmlFor={field.name}>
Description:
</label>
<input
name={field.name}
{...field.getInputProps()}
/>
<FieldInfo field={field} />
</div>
);
}}
/>
</div>
))}
</div>
<button
type="button"
onClick={() =>
hobbiesField.pushValue({
name: "",
description: "",
yearsOfExperience: 0,
})
}
>
Add hobby
</button>
</div>
<button
type="button"
onClick={() =>
hobbiesField.pushValue({
name: "",
description: "",
yearsOfExperience: 0,
})
}
>
Add hobby
</button>
</div>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? "..." : "Submit"}
</button>
)}
/>
</div>
<form.Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit}>
{isSubmitting ? "..." : "Submit"}
</button>
)}
/>
</form.Form>
</form>
</form.Provider>
</div>
);
}
1 change: 1 addition & 0 deletions packages/react-form/src/useField.tsx
Original file line number Diff line number Diff line change
@@ -129,6 +129,7 @@ export function Field<TData, TFormData>({
children: (fieldApi: FieldApi<TData, TFormData>) => any
} & UseFieldOptions<TData, TFormData>) {
const fieldApi = useField(fieldOptions as any)

return (
<formContext.Provider
value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}
4 changes: 4 additions & 0 deletions packages/react-form/src/useForm.tsx
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ declare module '@tanstack/form-core' {

// eslint-disable-next-line no-shadow
interface FormApi<TFormData> {
Provider: (props: { children: any }) => any
getFormProps: () => FormProps
Field: FieldComponent<TFormData, TFormData>
useField: UseField<TFormData>
@@ -40,6 +41,9 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
// @ts-ignore
const api = new FormApi<TData>(opts)

api.Provider = (props) => (
<formContext.Provider {...props} value={{ formApi: api }} />
)
api.getFormProps = () => {
return {
onSubmit: formApi.handleSubmit,

0 comments on commit ca8f244

Please sign in to comment.