React-swift-form NPM

react-swift-form

Features

☯ Very easy to use
🚀 Really fast
🏋 Extra small bundle size
🤯 Can works without any state
💅 Native and customizable errors
👯 Multiple validation modes
📑 Custom validation with
- 🎉 Cross inputs validation
- 😎 Async validation
- 🔥 Support dynamic form
💬 Custom messages / translations
💯 Fully tested
📚 Support controlled components and UI libraries
⚡️ Compatible with Next.js server actions
👀 Watch values
💪 And much more...

Install

# npm
npm install react-hook-form
# yarn
yarn add react-hook-form
# pnpm
pnpm install react-hook-form

Usage

With hook

import type { FormEvent } from 'react';
import { type IFormValues, useForm } from 'react-swift-form';

export default function Demo() {
  function handleSubmit(e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { formProps } = useForm({
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      <button type="submit">Submit</button>
    </form>
  );
}

Or with component

import type { FormEvent } from 'react';
import { Form, type IFormValues } from 'react-swift-form';

export default function Demo() {
  function handleSubmit(e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  return (
    <Form onSubmit={handleSubmit}>
      <input name="text" required />
      <button type="submit">Submit</button>
    </Form>
  );
}

Check the documentation for more.