JSPM – @wandry/inertia-form@1.5.0

Package Exports

@wandry/inertia-form
@wandry/inertia-form/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wandry/inertia-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Wandry Inertia Form

Production-ready React form components for Inertia.js with TypeScript support. Позволяет быстро создавать формы с поддержкой валидации, ошибок, сброса, кастомных полей и современных UI-практик (Radix UI, shadcn/ui, Tailwind).

🚀 Быстрый старт

pnpm add @wandry/inertia-form

import { Form, TextField, SubmitButton } from "@wandry/inertia-form";

export function MyForm() {
  return (
    <Form action="/submit" method="post" defaultValues={{ name: "" }}>
      <TextField name="name" label="Имя" />
      <SubmitButton>Отправить</SubmitButton>
    </Form>
  );
}

📚 Документация

Полная документация доступна в папке docs:

✨ Особенности

✅ Простая интеграция с Inertia.js и React
✅ TypeScript-first подход
✅ Современный UI (Radix UI, shadcn/ui, Tailwind)
✅ Валидация и обработка ошибок
✅ Кастомные поля через базовый Field компонент
✅ Хуки для гибкой работы с состоянием
✅ Сброс формы и управление состоянием

🛠 Установка

# pnpm
pnpm add @wandry/inertia-form

# npm
npm install @wandry/inertia-form

# yarn
yarn add @wandry/inertia-form

Важно: Пакет требует peer-зависимости. См. инструкцию по установке.

📖 Примеры

Простая форма

import { Form, TextField, SubmitButton } from "@wandry/inertia-form";

export function ContactForm() {
  return (
    <Form
      action="/contact"
      method="post"
      defaultValues={{ name: "", email: "" }}
    >
      <TextField name="name" label="Имя" required />
      <TextField name="email" label="Email" type="email" required />
      <SubmitButton>Отправить</SubmitButton>
    </Form>
  );
}

Кастомное поле

import { Field } from "@wandry/inertia-form";

function ColorPicker({ name, label }) {
  return (
    <Field
      name={name}
      label={label}
      controller={({ value, onChange }) => (
        <input
          type="color"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
      )}
    />
  );
}

🔗 Ссылки

📄 Лицензия

ISC