@per-form/react

@per-form/react

Fast and easy form validation for React based on native HTML capabilities

Documentation

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 '@per-form/react';

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 '@per-form/react';

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.

Examples

Check the example App.

Clone this repo and then run:

npm i
npm run dev