@twotalltotems/react-native-otp-input - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

index.d.ts

@@ -66,2 +66,10 @@ /* typescript declaration file created for @twotalltotems/react-native-otp-input
     placeholderTextColor?: string;
+    /**
+     * Style of the OTP container view
+     */
+    style?: object;
+    /**
+     * The highlight (and cursor on iOS) color of the text input.
+     */
+    selectionColor?: string;
   }
@@ -68,0 +76,0 @@

index.js

@@ -20,3 +20,5 @@ import React, { Component } from 'react'
         placeholderCharacter: PropTypes.string,
-        placeholderTextColor: PropTypes.string
+        placeholderTextColor: PropTypes.string,
+        style: PropTypes.object,
+        selectionColor: PropTypes.string,
     }
@@ -35,2 +37,4 @@
         placeholderTextColor: null,
+        style: null,
+        selectionColor: '#000',
     }
@@ -107,5 +111,6 @@
     checkPinCodeFromClipBoard = () => {
-        const { pinCount } = this.props
+        const { pinCount, onCodeFilled } = this.props
+        const regexp = new RegExp(`^\\d{${pinCount}}$`)
         Clipboard.getString().then(code => {
-            if (this.hasCheckedClipBoard && code.length === pinCount && (this.clipBoardCode !== code)) {
+            if (this.hasCheckedClipBoard && regexp.test(code) && (this.clipBoardCode !== code)) {
                 this.setState({
@@ -116,2 +121,3 @@ digits: code.split(""),
                     this.notifyCodeChanged()
+                    onCodeFilled && onCodeFilled(code)
                 })
@@ -141,4 +147,6 @@ }
                 text.split("").forEach((value) => {
-                    newdigits[index] = value
-                    index += 1
+                  if(index < pinCount) {
+                    newdigits[index] = value;
+                    index += 1;
+                  }
                 })
@@ -197,3 +205,3 @@ index -= 1
     renderOneInputField = (_, index) => {
-        const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, keyboardType } = this.props
+        const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, keyboardType, selectionColor } = this.props
         const { defaultTextFieldStyle } = styles
@@ -218,3 +226,3 @@ const { selectedIndex, digits } = this.state
                     key={index}
-                    selectionColor="#00000000"
+                    selectionColor={selectionColor}
                     secureTextEntry={secureTextEntry}
@@ -221,0 +229,0 @@ placeholder={placeholderCharacter}

package.json

 {
   "name": "@twotalltotems/react-native-otp-input",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "is a tiny JS library for one time passcode (OTP). Supports smart input suggestion on iOS and code autofill on Android (it will be filled when you press the copy button on the SMS notification bar)",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -24,2 +24,15 @@ ![PaginatableList](https://raw.githubusercontent.com/Twotalltotems/react-native-otp-input/master/assets/otp_banner.jpg)
 
+...
+
+<OTPInputView pinCount={4} />
+
+```
+
+## More Advanced Usage
+
+```
+import OTPInputView from '@twotalltotems/react-native-otp-input'
+
+...
+
 <OTPInputView
@@ -87,3 +100,4 @@ style={{width: '80%', height: 200}}
 ## Roadmap
-* [ ] Typescript
+* [x] Typescript definition file
+* [ ] Typescript implementation
 * [x] Add basic unit tests
@@ -90,0 +104,0 @@ * [ ] Add integration tests

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27273

increased by2.65%

Lines of code

401

increased by4.16%

Number of lines in readme file

150

increased by10.29%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes