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

Comparing version 1.2.1 to 2.0.0

dist/index.d.ts

 import React from 'react';
 declare type Props = {
+    allowedCharacters?: RegExp;
     characters?: number;
-    allowedCharacters?: RegExp;
+    containerClassName?: string;
+    inputClassName?: string;
+    inputType?: 'number' | 'password' | 'text';
     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

@@ -7,12 +7,11 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var AuthCode = function AuthCode(_ref) {
-  var _ref$characters = _ref.characters,
+  var _ref$allowedCharacter = _ref.allowedCharacters,
+      allowedCharacters = _ref$allowedCharacter === void 0 ? '^[A-Za-z0-9]*$' : _ref$allowedCharacter,
+      _ref$characters = _ref.characters,
       characters = _ref$characters === void 0 ? 6 : _ref$characters,
-      _ref$allowedCharacter = _ref.allowedCharacters,
-      allowedCharacters = _ref$allowedCharacter === void 0 ? '^[A-Za-z0-9]*$' : _ref$allowedCharacter,
-      onChange = _ref.onChange,
-      password = _ref.password,
-      inputStyle = _ref.inputStyle,
-      containerStyle = _ref.containerStyle,
+      containerClassName = _ref.containerClassName,
       inputClassName = _ref.inputClassName,
-      containerClassName = _ref.containerClassName;
+      _ref$inputType = _ref.inputType,
+      inputType = _ref$inputType === void 0 ? 'text' : _ref$inputType,
+      onChange = _ref.onChange;
   var inputsRef = React.useRef([]);
@@ -27,3 +26,3 @@ React.useEffect(function () {
     }).join('');
-    onChange(res);
+    onChange && onChange(res);
   };
@@ -92,3 +91,3 @@
       onPaste: handleOnPaste,
-      type: password ? 'password' : 'text',
+      type: inputType,
       ref: function ref(el) {
@@ -98,4 +97,3 @@ return inputsRef.current[i] = el;
       maxLength: 1,
-      className: inputClassName,
-      style: inputStyle
+      className: inputClassName
     }));
@@ -109,4 +107,3 @@ };
   return React__default.createElement("div", {
-    className: containerClassName,
-    style: containerStyle
+    className: containerClassName
   }, inputs);
@@ -113,0 +110,0 @@ };

dist/index.modern.js

 import React, { useRef, useEffect } from 'react';
 
-var AuthCode = function AuthCode(_ref) {
-  var _ref$characters = _ref.characters,
-      characters = _ref$characters === void 0 ? 6 : _ref$characters,
-      _ref$allowedCharacter = _ref.allowedCharacters,
-      allowedCharacters = _ref$allowedCharacter === void 0 ? '^[A-Za-z0-9]*$' : _ref$allowedCharacter,
-      onChange = _ref.onChange,
-      password = _ref.password,
-      inputStyle = _ref.inputStyle,
-      containerStyle = _ref.containerStyle,
-      inputClassName = _ref.inputClassName,
-      containerClassName = _ref.containerClassName;
-  var inputsRef = useRef([]);
-  useEffect(function () {
+const AuthCode = ({
+  allowedCharacters: _allowedCharacters = '^[A-Za-z0-9]*$',
+  characters: _characters = 6,
+  containerClassName,
+  inputClassName,
+  inputType: _inputType = 'text',
+  onChange
+}) => {
+  const inputsRef = useRef([]);
+  useEffect(() => {
     inputsRef.current[0].focus();
   }, []);
 
-  var sendResult = function sendResult() {
-    var res = inputsRef.current.map(function (input) {
-      return input.value;
-    }).join('');
-    onChange(res);
+  const sendResult = () => {
+    const res = inputsRef.current.map(input => input.value).join('');
+    onChange && onChange(res);
   };
 
-  var handleOnChange = function handleOnChange(e) {
-    if (e.target.value.match(allowedCharacters)) {
+  const handleOnChange = e => {
+    if (e.target.value.match(_allowedCharacters)) {
       if (e.target.nextElementSibling !== null) {
@@ -38,5 +33,7 @@ e.target.nextElementSibling.focus();
 
-  var handleOnKeyDown = function handleOnKeyDown(e) {
-    var key = e.key;
-    var target = e.target;
+  const handleOnKeyDown = e => {
+    const {
+      key
+    } = e;
+    const target = e.target;
 
@@ -57,11 +54,11 @@ if (key === 'Backspace') {
 
-  var handleOnFocus = function handleOnFocus(e) {
+  const handleOnFocus = e => {
     e.target.select();
   };
 
-  var handleOnPaste = function handleOnPaste(e) {
-    var value = e.clipboardData.getData('Text');
+  const handleOnPaste = e => {
+    const value = e.clipboardData.getData('Text');
 
-    if (value.match(allowedCharacters)) {
-      for (var i = 0; i < characters && i < value.length; i++) {
+    if (value.match(_allowedCharacters)) {
+      for (let i = 0; i < _characters && i < value.length; i++) {
         inputsRef.current[i].value = value.charAt(i);
@@ -80,5 +77,5 @@
 
-  var inputs = [];
+  const inputs = [];
 
-  var _loop = function _loop(i) {
+  for (let i = 0; i < _characters; i++) {
     inputs.push(React.createElement("input", {
@@ -90,19 +87,11 @@ key: i,
       onPaste: handleOnPaste,
-      type: password ? 'password' : 'text',
-      ref: function ref(el) {
-        return inputsRef.current[i] = el;
-      },
+      type: _inputType,
+      ref: el => inputsRef.current[i] = el,
       maxLength: 1,
-      className: inputClassName,
-      style: inputStyle
+      className: inputClassName
     }));
-  };
-
-  for (var i = 0; i < characters; i++) {
-    _loop(i);
   }
 
   return React.createElement("div", {
-    className: containerClassName,
-    style: containerStyle
+    className: containerClassName
   }, inputs);
@@ -109,0 +98,0 @@ };

package.json

 {
   "name": "react-auth-code-input",
-  "version": "1.2.1",
-  "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",
+  "version": "2.0.0",
+  "description": "A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. You can type, paste and move backwards using the backspace.",
   "author": "drac94",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

@@ -5,3 +5,3 @@ ![image](https://user-images.githubusercontent.com/1719915/82956329-2f7e8700-9f76-11ea-978f-ec7135c79311.png)
 
-> A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. It allows deleting using the backspace and pasting as well.
+> A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. You can type, paste and move backwards using the backspace.
 
@@ -12,2 +12,3 @@ [![NPM](https://img.shields.io/npm/v/react-auth-code-input.svg)](https://www.npmjs.com/package/react-auth-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![npm](https://img.shields.io/npm/dw/react-auth-code-input.svg)](https://www.npmjs.com/package/react-auth-code-input)
+![GitHub actions state](https://img.shields.io/github/workflow/status/drac94/react-auth-code-input/CI)
 
@@ -33,10 +34,15 @@ ## Demo
 ```jsx
-import React from 'react';
+import React, { useState } from 'react';
 import AuthCode from 'react-auth-code-input';
 
 const App = () => {
+  const [result, setResult] = useState('');
+  const handleOnChange = (res: string) => {
+    setResult(res);
+  };
+
   return (
     <AuthCode
       characters={5}
-      onChange={() => null}
+      onChange={handleOnChange}
       containerClassName='container'
@@ -53,16 +59,23 @@ inputClassName='input'
 | :------------------- | :---------------------- | :------------------------------------------------------------------------------ | :------------- | :----------------------------- |
+| `allowedCharacters`  | String                  | Regex for allowed characters                                                    | `^[A-Za-z0-9]` |                                |
 | `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 |
+| `containerClassName` | String                  | The styles to be applied to the container                                       |                |                                |
 | `inputClassName`     | String                  | The styles to be applied to each input                                          |                |                                |
-| `containerClassName` | String                  | The styles to be applied to the container                                       |                |                                |
+| `inputType`          | String                  | The type of the inputs                                                          | text           | text, number or password       |
 | `onChange`           | Function(value: String) | Callback function called every time an input value changes                      |                |                                |
+| ~~`password`~~       | Boolean                 | If present changes the type of the input to password, by default is set to text | false          | deprecated since version 2.0.0 |
+| ~~`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 |
 
 ## Changelog
 
+### 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
+- Add missing dist files.
 
@@ -69,0 +82,0 @@ ### 1.2.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

Number of lines in readme file

97

increased by15.48%

Worsened metrics

Total package byte prevSize

25169

decreased by-5.17%

Lines of code

189

decreased by-10%

No dependency changes