useStateWithValidation

Just like useState but with the possibility to pass a validation function to it. Along with the state and setState it also returns the “isValid” property.

Installation

npx rabbithook@latest add use-state-with-validation

Usage

App.tsx

import { useStateWithValidation from "@/hooks/use-state-with-validation";

function Component() {
  const [name, setName, isNameValid] = useStateWithValidation("", name => name.length > 5);

  return (
    <>
      <p>Name: { name }</p>
      <p>isNameValid: { isNameValid ? "Yes" : "No" }</p>
      <input value={name} onChange={event => setName(event.target.value)} />
    </>
  );
}

Code

Typescript

use-state-with-validation.ts

import { useState, useCallback } from "react";

type IUseStateWithValidation<T> = [
  T,
  (nextState: T | ((value: T) => T)) => void,
  boolean
];

function useStateWithValidation<T>(
  validationFunc: (value: T) => boolean,
  initialValue: T
): IUseStateWithValidation<T> {
  const [state, setState] = useState(initialValue);
  const [isValid, setIsValid] = useState(() => validationFunc(state));

  const onChange = useCallback(
    (nextState: T | ((value: T) => T)) => {
      const value = typeof nextState === "function" ? (nextState as (value: T) => T)(state) : nextState;

      setState(value);
      setIsValid(validationFunc(value));
    },
    [validationFunc]
  );

  return [state, onChange, isValid];
}

export default useStateWithValidation;

Javascript

use-state-with-validation.js

import { useState, useCallback } from "react"

function useStateWithValidation(validationFunc, initialValue) {
  const [state, setState] = useState(initialValue);
  const [isValid, setIsValid] = useState(() => validationFunc(state));

  const onChange = useCallback((nextState) => {
    const value = typeof nextState === "function" ? nextState(state) : nextState;

    setState(value)
    setIsValid(validationFunc(value));
  }, [validationFunc]);

  return [state, onChange, isValid];
}

export default useStateWithValidation;