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