Basic Setup - agentg2007/validation-context GitHub Wiki

import { InputComponentType, withValidation, useComponentValidationState } from "@nthity/validation";

type InputProps = InputComponentType<string>;
const Input = withValidation<InputProps>((props: InputProps) => {
  const { className = "", componentId, value, onChange } = props;
  const { valid, messages } = useComponentValidationState(componentId);
  return (
    <div className={className}>
      <div className={valid ? "" : "error"}>
        <input value={value} onChange={(e) => onChange(e.target.value)} />
      </div>
    </div>
  );
}, "InputDisplayName");

import ValidationContextProvider, {
  useValidationResult,
  Validators,
} from "@nthity/validation";

const App = () => {
  const [value, setValue] = useState("");
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <ValidationContextProvider validators={Validators}>
        <main style={{ border: "1px solid black", padding: 16 }}>
          <Input
            value={value}
            onChange={(value) => setValue(value)}
            validators={[
              {
                name: "RequiredFieldValidator",
              },
              {
                name: "EmailFieldValidator",
              },
              {
                name: "StringLengthFieldValidator",
                min: 7,
                max: 32,
              },
            ]}
          />
        </main>
        <ButtonPanel />
      </ValidationContextProvider>
    </div>
  );
};

const ButtonPanel = () => {
  const { valid = false, messages } = useValidationResult();
  return (
    <div style={{ display: "flex", flexDirection: "column", marginTop: 8 }}>
      <button style={{ padding: 8 }} disabled={!valid}>
        Submit
      </button>
      {!valid && (
        <ul className="error-messages">
          {messages.map((m, index) => (
            <li
              key={`ValidationMessage#${index}`}
              children={<span>{m.message}</span>}
            />
          ))}
        </ul>
      )}
    </div>
  );
};