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