Use case
We have input that validates something with the server (eg. check if username already exists). It would be nice to have indicator so user known we're working on it and it's not yet confirmed.
Current state
Currently you can mimic this behaviour with following code (note the example doesn't have all features requested in this feature request, eg. 50ms delay for transitioning into validating state):
const [isUserNameValidating, setIsUserNameValidating] = useState(false);
const userName = useValidation('', validateUnique);
useEffect(() => {
const validateUserName = () => {
setIsUserNameValidating(true);
await userName.validate();
setIsUserNameValidating(false);
};
validateUserName();
}, [username.value]);
Please correct me if there's simpler way validating on blur
Proposal
useValidation would return one additional value validating: boolean.
The value is by default false, only changed to true when executing long running Promise validation function (eg. min. 50ms). If validation function returns in less than that - don't change state to true. Set to false immediately after validation.
Example usage:
const userName = useValidation('', validateUnique);
const isUserNameValidating = userName.validating;
Use case
We have input that validates something with the server (eg. check if username already exists). It would be nice to have indicator so user known we're working on it and it's not yet confirmed.
Current state
Currently you can mimic this behaviour with following code (note the example doesn't have all features requested in this feature request, eg. 50ms delay for transitioning into validating state):
Please correct me if there's simpler way validating on blur
Proposal
useValidationwould return one additional valuevalidating: boolean.The value is by default false, only changed to true when executing long running Promise validation function (eg. min. 50ms). If validation function returns in less than that - don't change state to
true. Set tofalseimmediately after validation.Example usage: