diff --git a/examples/preact/simple/.gitignore b/examples/preact/simple/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/examples/preact/simple/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/preact/simple/README.md b/examples/preact/simple/README.md new file mode 100644 index 000000000..a9d90bf03 --- /dev/null +++ b/examples/preact/simple/README.md @@ -0,0 +1,15 @@ +# `create-preact` + +

+ +

+ +

Get started using Preact and Vite!

+ +## Getting Started + +- `pnpm dev` - Starts a dev server at http://localhost:5173/ + +- `pnpm build` - Builds for production, emitting to `dist/` + +- `pnpm preview` - Starts a server at http://localhost:4173/ to test production build locally diff --git a/examples/preact/simple/index.html b/examples/preact/simple/index.html new file mode 100644 index 000000000..6959245a9 --- /dev/null +++ b/examples/preact/simple/index.html @@ -0,0 +1,14 @@ + + + + + + + + Vite + Preact + + +
+ + + diff --git a/examples/preact/simple/package.json b/examples/preact/simple/package.json new file mode 100644 index 000000000..7c0f82325 --- /dev/null +++ b/examples/preact/simple/package.json @@ -0,0 +1,23 @@ +{ + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/preact-form": "^1.25.0", + "preact": "^10.26.9" + }, + "devDependencies": { + "@preact/preset-vite": "^2.10.2", + "eslint": "9.36.0", + "eslint-config-preact": "^2.0.0", + "typescript": "5.8.2", + "vite": "^7.0.4" + }, + "eslintConfig": { + "extends": "preact" + } +} diff --git a/examples/preact/simple/public/vite.svg b/examples/preact/simple/public/vite.svg new file mode 100644 index 000000000..ffcb6bcf5 --- /dev/null +++ b/examples/preact/simple/public/vite.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/examples/preact/simple/src/assets/preact.svg b/examples/preact/simple/src/assets/preact.svg new file mode 100644 index 000000000..f34e939f6 --- /dev/null +++ b/examples/preact/simple/src/assets/preact.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/preact/simple/src/index.tsx b/examples/preact/simple/src/index.tsx new file mode 100644 index 000000000..939305c23 --- /dev/null +++ b/examples/preact/simple/src/index.tsx @@ -0,0 +1,118 @@ +import { render } from 'preact' +import { useForm } from '@tanstack/preact-form' +import type { AnyFieldApi } from '@tanstack/preact-form' + +function FieldInfo({ field }: { field: AnyFieldApi }) { + return ( + <> + {field.state.meta.isTouched && !field.state.meta.isValid ? ( + {field.state.meta.errors.join(',')} + ) : null} + {field.state.meta.isValidating ? 'Validating...' : null} + + ) +} + +export default function App() { + const form = useForm({ + defaultValues: { + firstName: '', + lastName: '', + }, + onSubmit: async ({ value }) => { + // Do something with form data + console.log(value) + }, + }) + + return ( +
+

Simple Form Example

+
{ + e.preventDefault() + e.stopPropagation() + form.handleSubmit() + }} + > +
+ {/* A type-safe field component*/} + + !value + ? 'A first name is required' + : value.length < 3 + ? 'First name must be at least 3 characters' + : undefined, + onChangeAsyncDebounceMs: 500, + onChangeAsync: 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 ( + <> + + field.handleChange(e.currentTarget.value)} + /> + + + ) + }} + /> +
+
+ ( + <> + + field.handleChange(e.currentTarget.value)} + /> + + + )} + /> +
+ [state.canSubmit, state.isSubmitting]} + children={([canSubmit, isSubmitting]) => ( + <> + +