# password-check-rn

A simple password strength indicator component for react native

## Installation

```sh
npm install password-check-rn
```

## Usage

```ts
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<TextInput> |
| 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.

```ts
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](https://github.com/callstack/react-native-builder-bob)