react-hook-form-utils

A collection of utility functions to simplify setting up validation rules for react-hook-form.

Table of Contents

• Installation
• Usage
• API Reference
  • requiredRule
  • minLengthRule
  • maxLengthRule
  • patternRule
  • overrideRuleMessages

Installation

npm @axlotl-lab/react-hook-form-utils

Usage

import { useForm } from 'react-hook-form';
import { requiredRule, minLengthRule, maxLengthRule, patternRule } from '@axlotl-lab/react-hook-form-utils';

function MyForm() {
  const { register, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", {
        ...requiredRule(),
        ...minLengthRule(3),
        ...maxLengthRule(20)
      })} />
      <input {...register("email", {
        ...requiredRule(),
        ...patternRule(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i)
      })} />
      <button type="submit">Submit</button>
    </form>
  );
}

API Reference

requiredRule

Creates a required validation rule.

requiredRule(message?: string): { required: string | undefined }
requiredRule(options?: BaseRuleOptions): { required: string | undefined }

minLengthRule

Creates a minimum length validation rule.

minLengthRule(value: number): { minLength: { value: number; message: string; } }
minLengthRule(options: MinMaxRuleOptions): { minLength: { value: number; message: string; } }

maxLengthRule

Creates a maximum length validation rule.

maxLengthRule(value: number): { maxLength: { value: number; message: string; } }
maxLengthRule(options: MinMaxRuleOptions): { maxLength: { value: number; message: string; } }

patternRule

Creates a pattern (regex) validation rule.

patternRule(value: RegExp): { pattern: { value: RegExp; message: string; } }
patternRule(options: PatternOptions): { pattern: { value: RegExp; message: string; } }

overrideRuleMessages

Overrides default error messages for validation rules.

overrideRuleMessages({ lang, messages }: RulesMessageConfig): void