/reactuse

useValidatedState

Keeps a value, its current validity, and the last valid value together when invalid input should remain visible.

Usage

import { useValidatedState } from "@siberiacancode/reactuse";

const [{ value, valid }, setValue] = useValidatedState("", (value) => value.length >= 3);

Example

import { useValidatedState } from "@siberiacancode/reactuse";

export const UsernameField = () => {
  const [username, setUsername] = useValidatedState(
    "",
    (value) => value.length >= 3
  );

  return (
    <label>
      Username
      <input value={username.value} onChange={(event) => setUsername(event.target.value)} />
      {!username.valid && <span>Use at least 3 characters</span>}
    </label>
  );
};

initialValue:

const [age, setAge] = useValidatedState(18, (value) => value >= 18);

validate:

const [username, setUsername] = useValidatedState("", (value) => value.length >= 3);

initialValidationState:

const [email, setEmail] = useValidatedState("", isEmail, false);

Type Declarations

export interface UseValidatedStateValue<Value> {
  lastValidValue?: Value;
  valid: boolean;
  value: Value;
}
export type UseValidatedStateReturn<Value> = [
  state: UseValidatedStateValue<Value>,
  setValue: (value: Value) => void
];
export declare const useValidatedState: <Value>(
  initialValue: Value,
  validate: (value: Value) => boolean,
  initialValidationState?: boolean
) => UseValidatedStateReturn<Value>;