simple-react-validation
v1.0.6
Published
An easy to use validation tool using React hooks.
Downloads
30
Readme
Simple React Validation
An easy to use validator plugin for React allowing for easy component validation.
Usage example
import { useValidation } from "simple-react-validation";
export default function LoginPage() {
const { validator, getFieldErrors, setErrors, isValid } = useValidation();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [showValidation, setShowValidation] = useState(false);
const validate = useCallback((): boolean => {
const errors = validator
.for(username)
.validEmail()
.appendErrors('username')
.for(password)
.minimumLength(8)
.appendErrors('password')
.finalResult();
setErrors(errors);
return Object.keys(errors).length > 0;
}, [username, password, setErrors, validator]);
useEffect(() => {
if (showValidation) {
validate();
}
}, [username, password, validate, showValidation]);
const performLogin = () => {
setShowValidation(true);
const hasValidationErrors = validate();
if (hasValidationErrors) {
return;
}
// Perform login
}
<input type="text" value={username}>
<p>{getFieldErrors('username')}
<input type="password" value={password}>
<p>{getFieldErrors('password')}
<input type="button" disabled={!isValid} onClick={/* Perform action */}>
}