AutoForm

3ステップで試す

1. 1

   フォームエンジンとZod連携を導入

   React Hook Formを使う最小構成です。Zodは3.25.0より新しい版を使います。

   npm install @autoform/react react-hook-form @hookform/resolvers @autoform/zod zod
2. 2

   shadcn/ui向けAutoFormを追加

   公式レジストリからReact Hook Form用のAutoForm部品をプロジェクトへ追加します。

   npx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-rhf.json
3. 3

   既存スキーマをフォームに渡す

   ZodProviderで既存スキーマを包み、AutoFormへ渡して入力欄と検証が生成されることを確認します。Next.jsではフォーム本体をクライアントコンポーネントに置きます。

   new ZodProvider(schema) → <AutoForm schema={schemaProvider} withSubmit />

Built with

• TypeScript
• React

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• React Hook Form44,868 Stars

  共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語

  Reactのフォーム入力・検証・送信状態をHooksで管理するフォームライブラリ。ネイティブinputを活かしながら再レンダリングを抑える。

  TypeScript
• Cal.diy48,583 Stars

  共通タグ 3件 · 同じ言語

  Cal.comのEnterprise codeを除き、MITでself-hostできるcommunity scheduling platform。

  TypeScript
• Orgnise247 Stars

  共通タグ 3件 · 同じ言語

  knowledge base・documentation・project/task管理をNext.js/MongoDBでまとめるcollaboration web app。

  TypeScript
• Redux61,490 Stars

  共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語

  Application全体のStateをStoreに集約し、ActionとReducerで予測可能に更新するJavaScript/TypeScript向けState Management Library。現在はRedux Toolkitが公式推奨。

  TypeScript
• Expo52,361 Stars

  共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語

  React Nativeを土台にAndroid・iOS・Webを一つのproject modelで開発し、Router/Modulesをまとめるuniversal app framework。

  TypeScript