useField

Hook to manage a form field

utilities

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useField } from '@siberiacancode/reactuse';

Usage

const { register, getValue, setValue, reset, dirty, error, setError, clearError, touched, focus, watch } = useField();

Demo

source

Api

Parameters

Name	Type	Default	Note
params.initialValue?	Value	-	Initial value
params.initialTouched?	boolean	false	Initial touched state
params.autoFocus?	boolean	false	Auto focus
params.validateOnChange?	boolean	false	Validate on change
params.validateOnBlur?	boolean	false	Validate on blur
params.validateOnMount?	boolean	false	Validate on mount

Returns

UseFieldReturn<Value>

Type declaration

export interface UseFieldParams<Value> {
  /** The auto focus */
  autoFocus?: boolean;
  /** The initial touched */
  initialTouched?: boolean;
  /** The initial value */
  initialValue?: Value;
  /** The validate on blur */
  validateOnBlur?: boolean;
  /** The validate on mount */
  validateOnChange?: boolean;
  /** The validate on mount */
  validateOnMount?: boolean;
}

export interface UseFieldRegisterParams {
  /** The required validation */
  required?: string;
  /** The custom validation */
  validate?: (value: string) => Promise<string | true>;
  /** The min value validation */
  max?: {
    value: number;
    message: string;
  };
  /** The max length validation */
  maxLength?: {
    value: number;
    message: string;
  };
  /** The max value validation */
  min?: {
    value: number;
    message: string;
  };
  /** The min length validation */
  minLength?: {
    value: number;
    message: string;
  };
  /** The pattern validation */
  pattern?: {
    value: RegExp;
    message: string;
  };
}

export interface UseFieldReturn<Value> {
  /** The dirty state */
  dirty: boolean;
  /** The error state */
  error?: string;
  /** The set error function */
  touched: boolean;
  /** The set error function */
  clearError: () => void;
  /** The focus function */
  focus: () => void;
  /** The get value function */
  getValue: () => Value;
  /** The register function */
  register: (params?: UseFieldRegisterParams) => {
    onBlur: () => void;
    onChange: () => void;
    ref: (
      node: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null | undefined
    ) => void;
  };
  /** The reset function */
  reset: () => void;
  /** The set error function */
  setError: (error: string) => void;
  /** The  set value function */
  setValue: (value: Value) => void;
  /** The watch function */
  watch: () => Value;
}

Source

Source • Demo

Contributors

D

debabin

H

hywax