use-input-validator

Input validation that stays out of the way

use-input-validator is a hook that, given an object and a yup schema for that object, validates individual fields. It allows complex, deeply-nested object and component hierarchies without getting too crazy with refs, paths, array helpers and all the other rigmarole that some OTHER solutions use.

Table of Contents

• Installation
• Usage
• Demo
• Support
• Contributing
• License

Installation

npm install --save use-input-validator

Usage

import { useInputValidator, ValidationProvider } from "use-input-validator";
import * as yup from "yup";

export interface Data {
  aValue: string;
  anotherValue: string;
}
export interface Props {
  data: Data;
}
export const dataSchema: yup.SchemaOf<Data> = yup.object().shape({
  aValue: yup.string().required().equals(["Hello"]),
  anotherValue: yup.string().required().equals(["World!"]),
});

export const Form = (props: Props) => {
  const [data, setData] = useState(props.data);
  const {
    context,
    onChange,
    onBlur,
    InputErrorMessage,
    getClassName,
    formErrorCount,
  } = useInputValidator(dataSchema, data, {
    classNameErrorInput: "is-invalid",
    classNameErrorMessage: "text-danger",
  });

  return (
    <ValidationProvider context={context}>
      <input
        className={getClassName("aValue")}
        name="aValue"
        value={data.aValue}
        onChange={onChange("aValue", (e) =>
          setData((d) => ({ ...d, aValue: e.target.value }))
        )}
        onBlur={onBlur("aValue")}
      />
      <InputErrorMessage name="aValue" />
      <button onClick={() => console.log()} disabled={formErrorCount !== 0}>
        Submit
      </button>
    </ValidationProvider>
  );
};

Things worth mentioning

• You are in charge of your data. This hook maintains a shallow clone of your data only to do reevaluations.
• Validation is tied to InputErrorMessage. In the above example, only property aValue will be validated.
• Using a ValidationProvider is only necessary if there will be nested components that also use this hook.
• A more complete example can be found in src/demo

Demo

If you clone the repo, you can run the demo code under src/demo...

git clone https://github.com/ucdavis/UseInputValidator.git
cd UseInputValidator
npm install
npm run storybook

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

License

MIT © UC Davis