React Hooks Password Validator
npm install react-use-password-validator> A React Hook that provides password validator functionality.
``bash`
npm install --save react-use-password-validator
`tsx
import React, { useState } from 'react'
import usePasswordValidator from 'react-use-password-validator'
const PasswordForm: React.FC<{}> = props => {
const [ password, setPassword ] = useState("")
const [ isValid, setIsValid ] = usePasswordValidator()
return type='password'
onChange={ e => {
setPassword(e.target.value)
setIsValid(e.target.value)
}}
value={password}
>
}
`
ts
type UsePasswordValidator = [ boolean, ( password: string ) => void ]
`Paramters
Basically, it refers to the parameters of .
Please check password-validator
`ts
type ValidatorOptionType = number | boolean;interface IValidatorOption {
min: number;
max: number;
digits: ValidatorOptionType;
letters: ValidatorOptionType;
lowercase: ValidatorOptionType;
uppercase: ValidatorOptionType;
symbols: ValidatorOptionType;
spaces: ValidatorOptionType;
};
export function usePasswordValidator( option?: Partial ) { / ... / }
`
$3
- if set : Not checking anything.
- if set true: Make sure it is included.
- if set false: Make sure it is not included.
- if set number: Needs to contain more than the specified number.$3
`ts
const DEFAULT_OPTION = {
min: 6,
max: 100,
spaces: false,
letters: true
}
`Example
ts
/*
* This rule is
* - At least six characters and no more than 100 characters
* - At least two numbers
* - At least two uppercase letters
* - include lowercase letters
* - Do not include spaces
*
*/
const [ isValid, setIsValid ] = usePasswordValidator({
digits: 2,
lowercase: true,
uppercase: 2,
spaces: false
})
`HOC
As a future challenge, I also created a HOC.$3
tsx
import { withValidState, WithProps } from 'react-use-password-validator';interface IProps {
title: string;
};
const Component: React.FC = props => {
const [ password, setPassword ] = useState("")
const { title, isValid, setIsValid } = props;
return
value={password}
onChange={ e => {
setPassword(e.target.value)
setIsValid(e.target.value)
}}>
};
export default withValidState(Component, { spaces: 1, uppercase: 1, lowercase: 1, digits: 1, symbols: 1, min: 5, max: 10 })
``MIT © tsk-murakami