React Input element with support for customValidity props

Input.tsx

/**
 * Usage:
 * <Input customValidity="your validation message" /> // add constraint
 * or
 * <Input customValidity="" /> // remove constraint
 * or
 * <Input defaultCustomValidity="you message" /> // initial validationMessage
 */
export function Input({
  defaultCustomValidity,
  customValidity,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement> & {
  defaultCustomValidity?: string;
  customValidity?: string;
}) {
  const ref = useRef<HTMLInputElement | null>(null);

  // 1. "Controlled" case
  useEffect(() => {
    const input = ref.current;
    if (customValidity != null && input) {
      input.setCustomValidity(customValidity);
    }
  }, [customValidity]);

  // 2. "Uncontrolled" case
  const customValidityRef = useRef(defaultCustomValidity);
  useEffect(() => {
    const input = ref.current;
    if (customValidityRef.current && input) {
      input.setCustomValidity(customValidityRef.current);
    }
  }, []);

  return <input ref={ref} {...props} />;
}