indatastar-styled-password-strength-meter 0.1.0 â 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,34 +1,96 @@
|
|
|
1
|
-
# indatastar-styled-password-strength-meter
|
|
1
|
+
# ð indatastar-styled-password-strength-meter
|
|
2
2
|
|
|
3
3
|
A lightweight, customizable **password strength meter** for React Native apps.
|
|
4
4
|
|
|
5
|
-
## Installation
|
|
5
|
+
## ⥠Installation
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
```
|
|
8
|
+
```bash
|
|
9
9
|
npm install indatastar-styled-password-strength-meter
|
|
10
|
+
# or
|
|
11
|
+
yarn add indatastar-styled-password-strength-meter
|
|
10
12
|
```
|
|
11
13
|
|
|
12
14
|
|
|
13
|
-
## Usage
|
|
15
|
+
## ð ïļ Usage
|
|
14
16
|
|
|
15
17
|
|
|
16
18
|
```js
|
|
17
|
-
import {
|
|
19
|
+
import React, { useState } from 'react';
|
|
20
|
+
import { TextInput, SafeAreaView, StyleSheet } from 'react-native';
|
|
21
|
+
import { PasswordStrengthMeter } from 'indatastar-styled-password-strength-meter';
|
|
22
|
+
|
|
23
|
+
export default function App() {
|
|
24
|
+
const [password, setPassword] = useState<string>('');
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<SafeAreaView style={styles.container}>
|
|
28
|
+
<TextInput
|
|
29
|
+
value={password}
|
|
30
|
+
onChangeText={(text) => setPassword(text)}
|
|
31
|
+
style={styles.input}
|
|
32
|
+
placeholder="Enter your password"
|
|
33
|
+
/>
|
|
34
|
+
<PasswordStrengthMeter
|
|
35
|
+
password={password}
|
|
36
|
+
containerStyle={styles.meterContainer}
|
|
37
|
+
textStyle={styles.meterText}
|
|
38
|
+
/>
|
|
39
|
+
</SafeAreaView>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const styles = StyleSheet.create({
|
|
44
|
+
container: {
|
|
45
|
+
flex: 1,
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
backgroundColor: '#ecf0f1',
|
|
49
|
+
padding: 8,
|
|
50
|
+
},
|
|
51
|
+
input: {
|
|
52
|
+
width: 200,
|
|
53
|
+
height: 50,
|
|
54
|
+
borderColor: 'black',
|
|
55
|
+
borderWidth: 2,
|
|
56
|
+
paddingHorizontal: 10,
|
|
57
|
+
marginBottom: 20,
|
|
58
|
+
},
|
|
59
|
+
meterContainer: {
|
|
60
|
+
padding: 10,
|
|
61
|
+
backgroundColor: '#f0f0f0',
|
|
62
|
+
borderRadius: 8,
|
|
63
|
+
},
|
|
64
|
+
meterText: {
|
|
65
|
+
fontSize: 16,
|
|
66
|
+
fontFamily: 'Roboto',
|
|
67
|
+
},
|
|
68
|
+
});
|
|
18
69
|
|
|
19
|
-
// ...
|
|
20
|
-
|
|
21
|
-
const result = await multiply(3, 7);
|
|
22
70
|
```
|
|
23
71
|
|
|
72
|
+
## ðĶ Props
|
|
73
|
+
|
|
74
|
+
| Prop | Type | Default | Description |
|
|
75
|
+
|-----------------|--------|---------|-------------|
|
|
76
|
+
| `password` | string | `''` | The password string to evaluate. |
|
|
77
|
+
| `containerStyle`| object | `{}` | Custom styles for the meter container. |
|
|
78
|
+
| `textStyle` | object | `{}` | Custom styles for the strength text. |
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
## âĻ Features
|
|
82
|
+
|
|
83
|
+
- ⥠Real-time password strength evaluation.
|
|
84
|
+
- ðĻ Fully customizable container and text styles.
|
|
85
|
+
- ðŠķ Lightweight and easy to integrate in React Native apps.
|
|
24
86
|
|
|
25
|
-
## Contributing
|
|
87
|
+
## ðĪ Contributing
|
|
26
88
|
|
|
27
|
-
- [Development workflow](CONTRIBUTING.md#development-workflow)
|
|
28
|
-
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
|
|
29
|
-
- [Code of conduct](CODE_OF_CONDUCT.md)
|
|
89
|
+
- ð ïļ [Development workflow](CONTRIBUTING.md#development-workflow)
|
|
90
|
+
- ðĪ [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
|
|
91
|
+
- ð [Code of conduct](CODE_OF_CONDUCT.md)
|
|
30
92
|
|
|
31
|
-
## License
|
|
93
|
+
## ð License
|
|
32
94
|
|
|
33
95
|
MIT
|
|
34
96
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "indatastar-styled-password-strength-meter",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A lightweight, customizable **password strength meter** for React Native apps. ",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|