react-auth-code-input - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.js

@@ -41,11 +41,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
     var key = e.key;
+    var target = e.target;
 
     if (key === 'Backspace') {
-      if (e.target.value === '' && e.target.previousElementSibling !== null) {
-        if (e.target.previousElementSibling !== null) {
-          e.target.previousElementSibling.focus();
+      if (target.value === '' && target.previousElementSibling !== null) {
+        if (target.previousElementSibling !== null) {
+          target.previousElementSibling.focus();
           e.preventDefault();
         }
       } else {
-        e.target.value = '';
+        target.value = '';
       }
@@ -82,3 +83,3 @@
   var _loop = function _loop(i) {
-    inputs.push( /*#__PURE__*/React__default.createElement("input", {
+    inputs.push(React__default.createElement("input", {
       key: i,
@@ -102,3 +103,3 @@ onChange: handleOnChange,
 
-  return /*#__PURE__*/React__default.createElement("div", {
+  return React__default.createElement("div", {
     style: containerStyle
@@ -105,0 +106,0 @@ }, inputs);

dist/index.modern.js

@@ -38,11 +38,12 @@ import React, { useRef, useEffect } from 'react';
     var key = e.key;
+    var target = e.target;
 
     if (key === 'Backspace') {
-      if (e.target.value === '' && e.target.previousElementSibling !== null) {
-        if (e.target.previousElementSibling !== null) {
-          e.target.previousElementSibling.focus();
+      if (target.value === '' && target.previousElementSibling !== null) {
+        if (target.previousElementSibling !== null) {
+          target.previousElementSibling.focus();
           e.preventDefault();
         }
       } else {
-        e.target.value = '';
+        target.value = '';
       }
@@ -79,3 +80,3 @@
   var _loop = function _loop(i) {
-    inputs.push( /*#__PURE__*/React.createElement("input", {
+    inputs.push(React.createElement("input", {
       key: i,
@@ -99,3 +100,3 @@ onChange: handleOnChange,
 
-  return /*#__PURE__*/React.createElement("div", {
+  return React.createElement("div", {
     style: containerStyle
@@ -102,0 +103,0 @@ }, inputs);

package.json

 {
   "name": "react-auth-code-input",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. It allows deleting using the backspace and pasting as well",
@@ -10,3 +10,3 @@ "author": "drac94",
   "module": "dist/index.modern.js",
-  "source": "src/index.js",
+  "source": "src/index.tsx",
   "engines": {
@@ -21,5 +21,5 @@ "node": ">=10"
     "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
+    "test:lint": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx src/",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:watch": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "predeploy": "cd example && yarn install && yarn run build",
@@ -33,3 +33,11 @@ "deploy": "gh-pages -d example/build",
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.1",
+    "@types/jest": "^25.1.4",
+    "@types/node": "^12.12.38",
+    "@types/react": "^16.9.27",
+    "@types/react-dom": "^16.9.7",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
     "babel-eslint": "^10.0.3",
@@ -48,2 +56,4 @@ "cross-env": "^7.0.2",
     "gh-pages": "^2.2.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
@@ -53,3 +63,4 @@ "prettier": "^2.0.4",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^3.4.1",
+    "typescript": "^3.7.5"
   },
@@ -65,3 +76,4 @@ "files": [
     "input"
-  ]
+  ],
+  "dependencies": {}
 }

README.md

@@ -31,4 +31,4 @@ ![image](https://user-images.githubusercontent.com/1719915/82956329-2f7e8700-9f76-11ea-978f-ec7135c79311.png)
 ```jsx
-import React from 'react'
-import AuthCode from 'react-auth-code-input'
+import React from 'react';
+import AuthCode from 'react-auth-code-input';
 
@@ -53,20 +53,23 @@ const App = () => {
     />
-  )
-}
+  );
+};
 ```
 
-
 ### Props
 
-| Prop | Type | Description | Default Value |
-| :--- | :--- | :--- | :--- |
-| `characters` | Number | The number of inputs to display | 6 |
-| `allowedCharacters` | String | Regex for allowed characters | `^[A-Za-z0-9]` |
-| `password` | Boolean | If present changes the type of the input to password, by default is set to text | False |
-| `inputStyle` | Object | The styles to be applied to each input | |
-| `containerStyle` | Object | The styles to be applied to each input | |
-| `onChange` | Function(value: String) | Callback function called every time an input value changes | |
+| Prop                | Type                    | Description                                                                     | Default Value  |
+| :------------------ | :---------------------- | :------------------------------------------------------------------------------ | :------------- |
+| `characters`        | Number                  | The number of inputs to display                                                 | 6              |
+| `allowedCharacters` | String                  | Regex for allowed characters                                                    | `^[A-Za-z0-9]` |
+| `password`          | Boolean                 | If present changes the type of the input to password, by default is set to text | False          |
+| `inputStyle`        | Object                  | The styles to be applied to each input                                          |                |
+| `containerStyle`    | Object                  | The styles to be applied to each input                                          |                |
+| `onChange`          | Function(value: String) | Callback function called every time an input value changes                      |                |
 
 ## Changelog
 
+### 1.1.0
+
+- Typescript support.
+
 ### 1.0.0
@@ -73,0 +76,0 @@

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

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

24279

increased by11.07%

Number of package files

10

increased by25%

Lines of code

194

increased by7.78%

Number of lines in readme file

82

increased by3.8%

Worsened metrics

Dev dependency count

30

increased by57.89%

No dependency changes