https://github.com/techwithty/zod-react-form-auto
Authentication form components for Next.js with Zod validation and strong SEO defaults.
https://github.com/techwithty/zod-react-form-auto
auth form nextjs react seo typescript ui zod
Last synced: 3 months ago
JSON representation
Authentication form components for Next.js with Zod validation and strong SEO defaults.
- Host: GitHub
- URL: https://github.com/techwithty/zod-react-form-auto
- Owner: TechWithTy
- Created: 2025-08-20T22:54:26.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-08-20T22:54:38.000Z (8 months ago)
- Last Synced: 2025-08-21T00:29:44.042Z (8 months ago)
- Topics: auth, form, nextjs, react, seo, typescript, ui, zod
- Language: TypeScript
- Homepage: https://www.cybershoptech.com
- Size: 26.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @your-scope/zod-react-form-auto (local externalized)
A small AutoForm for React + Zod + react-hook-form that renders fields from a Zod schema. This is the externalized copy living inside this repo for local integration and testing.
## Install (when published)
```bash
pnpm add @your-scope/autoform zod react react-dom react-hook-form @hookform/resolvers
```
Peer dependencies expected in the host app: react, react-dom, react-hook-form, zod, @hookform/resolvers.
## Local usage (pre-publish)
While this folder lives inside the app repo, you can import directly from the local source:
```ts
import { AutoForm, useZodForm } from "../../components/external/zod-react-form-auto/src";
import "../../components/external/zod-react-form-auto/styles/index.css";
```
## Next.js example (React 19)
```tsx
import { z } from "zod";
import { useZodForm, AutoForm } from "@your-scope/autoform";
const schema = z.object({
name: z.string().min(1),
temperature: z.number().min(0).max(1).default(0.7),
language: z.enum(["en", "es"]).default("en"),
});
export default function Page() {
const form = useZodForm(schema, { defaultValues: { name: "" } });
return (
console.log(values)}
fields={{
temperature: { widget: "slider", min: 0, max: 1, step: 0.1 },
language: {
widget: "select",
options: [
{ value: "en", label: "English" },
{ value: "es", label: "Spanish" },
],
},
}}
/>
);
}
```
## Exports
- AutoForm
- AutoField
- useZodForm
- unwrapType
- types: FieldsConfig, AutoFieldProps
## Styles
A minimal default stylesheet is available at `@your-scope/autoform/styles` and in this local copy under `styles/index.css`.