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

Comparing version 1.1.0 to 1.2.0

dist/index.d.ts

@@ -5,8 +5,16 @@ import React from 'react';
     allowedCharacters?: RegExp;
-    onChange?: (res: string) => void;
+    onChange: (res: string) => void;
     password?: boolean;
+    /**
+     * @deprecated Since version 1.2.0 Will be deleted in version 2.0. Use inputClassName instead.
+     */
     inputStyle?: React.CSSProperties;
+    /**
+     * @deprecated Since version 1.2.0 Will be deleted in version 2.0. Use containerClassName instead.
+     */
     containerStyle?: React.CSSProperties;
+    inputClassName?: string;
+    containerClassName?: string;
 };
 declare const AuthCode: React.FC<Props>;
 export default AuthCode;

dist/index.js

@@ -14,3 +14,5 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       inputStyle = _ref.inputStyle,
-      containerStyle = _ref.containerStyle;
+      containerStyle = _ref.containerStyle,
+      inputClassName = _ref.inputClassName,
+      containerClassName = _ref.containerClassName;
   var inputsRef = React.useRef([]);
@@ -25,3 +27,3 @@ React.useEffect(function () {
     }).join('');
-    onChange && onChange(res);
+    onChange(res);
   };
@@ -95,2 +97,3 @@
       maxLength: 1,
+      className: inputClassName,
       style: inputStyle
@@ -105,2 +108,3 @@ }));
   return React__default.createElement("div", {
+    className: containerClassName,
     style: containerStyle
@@ -107,0 +111,0 @@ }, inputs);

dist/index.modern.js

@@ -11,3 +11,5 @@ import React, { useRef, useEffect } from 'react';
       inputStyle = _ref.inputStyle,
-      containerStyle = _ref.containerStyle;
+      containerStyle = _ref.containerStyle,
+      inputClassName = _ref.inputClassName,
+      containerClassName = _ref.containerClassName;
   var inputsRef = useRef([]);
@@ -22,3 +24,3 @@ useEffect(function () {
     }).join('');
-    onChange && onChange(res);
+    onChange(res);
   };
@@ -92,2 +94,3 @@
       maxLength: 1,
+      className: inputClassName,
       style: inputStyle
@@ -102,2 +105,3 @@ }));
   return React.createElement("div", {
+    className: containerClassName,
     style: containerStyle
@@ -104,0 +108,0 @@ }, inputs);

package.json

 {
   "name": "react-auth-code-input",
-  "version": "1.1.0",
+  "version": "1.2.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",
@@ -5,0 +5,0 @@ "author": "drac94",

README.md

@@ -38,15 +38,5 @@ ![image](https://user-images.githubusercontent.com/1719915/82956329-2f7e8700-9f76-11ea-978f-ec7135c79311.png)
       characters={5}
-      containerStyle={{
-        padding: '16px'
-      }}
-      inputStyle={{
-        width: '2ch',
-        padding: '8px',
-        borderRadius: '8px',
-        fontSize: '40px',
-        textAlign: 'center',
-        marginRight: '12px',
-        border: '1px solid black',
-        textTransform: 'uppercase'
-      }}
+      onChange={() => null}
+      containerClassName='container'
+      inputClassName='input'
     />
@@ -59,13 +49,21 @@ );
 
-| 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  | Observations                   |
+| :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
+| `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                                          |                | deprecated since version 1.2.0 |
+| `containerStyle`     | Object                  | The styles to be applied to the container                                       |                | deprecated since version 1.2.0 |
+| `inputClassName`     | String                  | The styles to be applied to each input                                          |                |                                |
+| `containerClassName` | String                  | The styles to be applied to the container                                       |                |                                |
+| `onChange`           | Function(value: String) | Callback function called every time an input value changes                      |                |                                |
 
 ## Changelog
 
+### 1.2.0
+
+- Add `inputClassName` and `containerClassName` props.
+- Deprecate `inputStyle` and `containerStyle`.
+- Make `onChange` prop mandatory.
+
 ### 1.1.0
@@ -72,0 +70,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

26505

increased by9.17%

Lines of code

210

increased by8.25%

Worsened metrics

Number of lines in readme file

80

decreased by-2.44%

No dependency changes