password-check-rn
v1.0.7
Published
A simple password strength indicator component
Downloads
54
Readme
password-check-rn
A simple password strength indicator component for react native
Installation
npm install password-check-rn
Usage
import { View, TextInput } from 'react-native';
import React, { useState } from 'react';
import { PasswordCheck } from 'password-check-rn';
export default function App() {
const [password, setPassword] = useState<string>('');
const inputRef = useRef<TextInput | null>(null);
function isValid<T>(params: T) {
// receives all rules as keys with values as boolean to indicate if condition is met
console.log('params', params);
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
width: 300,
height: 40,
}}
>
<TextInput
ref={inputRef}
value={password}
onChangeText={setPassword}
style={{
borderWidth: 1,
borderColor: 'lightGray',
width: '100%',
height: '100%',
}}
/>
<PasswordCheck
value={password}
inputRef={inputRef}
position="top"
images={{ pass: IMAGE, fail: IMAGE }}
positionStyle={{ top: 40 }}
rules={initialRules}
containerStyle={{}}
headerTextStyle={{}}
topArrowStyle={{}}
bottomArrowStyle={{}}
rowContainerStyle={{}}
rowImageStyle={{}}
rowIconPassStyle={{}}
rowIconFailStyle={{}}
rowTextPassStyle={{}}
rowTextFailStyle={{}}
isValid={isValid}
/>
</View>
</View>
);
}
Props
| name | required | type | | ----------------- | -------- | --------------------------- | | value | Yes | string | | inputRef | Yes | MutableRefObject | | position | No | 'top' or 'bottom' | | images | No | {pass:string,fail:string } | | positionStyle | No | ViewStyle | | containerStyle | No | ViewStyle | | headerTextStyle | No | TextStyle | | topArrowStyle | No | ViewStyle | | bottomArrowStyle | No | ViewStyle | | rowContainerStyle | No | ViewStyle | | rowImageStyle | No | ImageStyle | | rowIconPassStyle | No | TextStyle | | rowIconFailStyle | No | TextStyle | | rowTextPassStyle | No | TextStyle | | rowTextFailStyle | No | TextStyle |
rules prop type
if rules is passed, "notEmpty" key prop is required. All others are optional.
interface RulesProp {
heading?: string; // takes message as value
minLength?: [number, string]; // takes minimum required characters length at 0th index and message at index 1
maxLength?: [number, string]; // takes maximum allowed characters length 0th index and message at index 1
specialChar?: [RegExp, string]; // takes regular expression at 0th index and message at index 1
match?: [string, string]; // for confirm password, takes previous password to match with current password at 0th index and message at index 1
number?: string; // takes message as value
smallLetter?: string; // takes message as value
capitalLetter?: string; // takes message as value
notEmpty: string; // takes message as value
}
License
MIT
Made with create-react-native-library