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

Comparing version 3.1.0 to 3.1.1

dist/index.d.ts

@@ -7,2 +7,3 @@ import React from 'react';
     autoFocus?: boolean;
+    disabled?: boolean;
     length?: number;
@@ -9,0 +10,0 @@ containerClassName?: string;

dist/index.js

@@ -32,2 +32,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+      disabled = _ref.disabled,
       _ref$length = _ref.length,
@@ -115,5 +116,7 @@ length = _ref$length === void 0 ? 6 : _ref$length,
     if (key === 'Backspace') {
-      if (target.value === '' && target.previousElementSibling !== null) {
+      if (target.value === '') {
         if (target.previousElementSibling !== null) {
-          target.previousElementSibling.focus();
+          var t = target.previousElementSibling;
+          t.value = '';
+          t.focus();
           e.preventDefault();
@@ -174,3 +177,4 @@ }
       autoComplete: i === 0 ? 'one-time-code' : 'off',
-      "aria-label": ariaLabel ? ariaLabel + ". Character " + (i + 1) + "." : "Character " + (i + 1) + "."
+      "aria-label": ariaLabel ? ariaLabel + ". Character " + (i + 1) + "." : "Character " + (i + 1) + ".",
+      disabled: disabled
     })));
@@ -177,0 +181,0 @@ };

dist/index.modern.js

@@ -27,2 +27,3 @@ import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
   autoFocus: _autoFocus = true,
+  disabled,
   length: _length = 6,
@@ -107,5 +108,7 @@ containerClassName,
     if (key === 'Backspace') {
-      if (target.value === '' && target.previousElementSibling !== null) {
+      if (target.value === '') {
         if (target.previousElementSibling !== null) {
-          target.previousElementSibling.focus();
+          const t = target.previousElementSibling;
+          t.value = '';
+          t.focus();
           e.preventDefault();
@@ -166,3 +169,4 @@ }
       autoComplete: i === 0 ? 'one-time-code' : 'off',
-      "aria-label": ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`
+      "aria-label": ariaLabel ? `${ariaLabel}. Character ${i + 1}.` : `Character ${i + 1}.`,
+      disabled: disabled
     })));
@@ -169,0 +173,0 @@ }

package.json

 {
   "name": "react-auth-code-input",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "One-time password (OTP) React input component, uncontrolled, zero dependencies, fully tested.",
@@ -5,0 +5,0 @@ "author": "drac94",

README.md

@@ -1,2 +0,2 @@
-![image](https://user-images.githubusercontent.com/1719915/159336862-113dfbdd-e415-4237-afdb-f9df6628aaf7.png)
+![image](https://user-images.githubusercontent.com/1719915/159784302-4bb83708-e993-4800-9bcf-091ecb709ef7.png)
 
@@ -29,2 +29,4 @@ # React Auth Code Input
 
+# Version 3+
+
 ## Basic Usage
@@ -48,3 +50,3 @@
 
-By default you can type anything in the inputs as the `allowedCharacters` prop is defaulted to `alphanumeric` but you can also choose between allowing only letters or only numbers by setting the prop to `alpha` or `numeric` respectively.
+By default you can type numbers and letters in the inputs as the `allowedCharacters` prop is defaulted to `alphanumeric` but you can also choose between allowing only letters or only numbers by setting the prop to `alpha` or `numeric` respectively.
 
@@ -127,3 +129,3 @@ ```tsx
 | `ariaLabel`          | String                  | Accessibility.                                              |                |                                                  |
-| `autoFocus`          | Boolean                 | Wether the first input is focused on mount or not..         | true           |                                                  |
+| `autoFocus`          | Boolean                 | Wether the first input is focused on mount or not..         | true           | Since version 3.1.0                              |
 | `length`             | Number                  | The number of inputs to display.                            | 6              |                                                  |
@@ -134,2 +136,3 @@ | `containerClassName` | String                  | The styles to be applied to the container.                  |                |                                                  |
 | `isPassword`         | Boolean                 | Whether to display the inputs as passwords or not.          | false          |                                                  |
+| `disabled`           | Boolean                 | Makes all the inputs disabled if true.                      | false          | Since version 3.1.1                              |
 
@@ -140,5 +143,10 @@ ## Changelog
 
+- Add `disabled` prop to disable all the inputs.
+- Make the backspace delete the previous character if the current is empty. Previously it just moved the focus making the user hit twice the backspace to delete the value.
+
+### 3.1.0
+
 - Add `autoFocus` prop set to true by default to not break current usages.
-- Expose a `focus` method to handle the focus of the first input manually.
-- Expose a `clear` method to clear the input programmatically.
+- Expose a `focus` method using references to handle the focus of the first input manually.
+- Expose a `clear` method using references to clear the input programmatically.
 - Add validations for when not using typescript.
@@ -154,32 +162,2 @@ - Update React peerDependency to use any version 16+.
 
-### 2.1.0
-
-- Support to fill one-time-codes directly from SMS's.
-- Displays numeric keyboard on mobile devices when the `inputType` prop is set to `number`
-- Add `ariaLabel` prop for accessibility.
-
-### 2.0.0
-
-- Remove `inputStyle` prop in favor of `inputClassName`.
-- Remove `containerStyle` prop in favor of `containerClassName`.
-- Remove `password` prop in favor of `inputType` which accepts _text_, _password_ or _number_ value.
-
-### 1.2.1
-
-- Add missing dist files.
-
-### 1.2.0
-
-- Add `inputClassName` and `containerClassName` props.
-- Deprecate `inputStyle` and `containerStyle`.
-- Make `onChange` prop mandatory.
-
-### 1.1.0
-
-- Typescript support.
-
-### 1.0.0
-
-- Initial Version. | | deprecated since version 1.2.0 |
-
 ## License
@@ -186,0 +164,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

42218

increased by0.51%

Lines of code

347

increased by2.66%

Worsened metrics

Number of lines in readme file

162

decreased by-11.96%

No dependency changes