otp-input-react - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/index.js

@@ -7,2 +7,4 @@ "use strict";
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
@@ -22,4 +24,2 @@
 
-require("./style.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,3 +37,5 @@
       className = _ref.className,
-      inputClassName = _ref.inputClassName;
+      inputClassName = _ref.inputClassName,
+      inputStyles = _ref.inputStyles,
+      style = _ref.style;
 
@@ -149,2 +151,3 @@ var _useState = (0, _react.useState)(autoFocus ? 0 : -1),
 
+  // Needs to be memorized
   var renderInputs = function renderInputs() {
@@ -158,2 +161,3 @@ var otp = getOtpValue();
         className: inputClassName,
+        inputStyles: inputStyles,
         key: index,
@@ -180,3 +184,3 @@ focus: activeInput === index,
     "div",
-    { className: "otp__input-root " + className },
+    { style: _extends({ display: "flex" }, style), className: "" + className },
     renderInputs()
@@ -196,3 +200,5 @@ );
   otpType: _propTypes2.default.oneOf(["number", "any"]),
-  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
+  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  inputStyles: _propTypes2.default.object,
+  style: _propTypes2.default.object
 };
@@ -209,5 +215,7 @@
   value: "",
-  otpType: "any"
+  otpType: "any",
+  inputStyles: {},
+  style: {}
 };
 
 exports.default = OtpInput;

dist/Input/index.js

@@ -21,2 +21,9 @@ "use strict";
 
+var inputDefaultStyles = {
+  width: 32,
+  height: 32,
+  textAlign: "center",
+  marginRight: 20
+};
+
 /**
@@ -43,3 +50,4 @@ * This is react stateless component
       secure = _ref.secure,
-      rest = _objectWithoutProperties(_ref, ["focus", "autoFocus", "disabled", "value", "onInputFocus", "index", "secure"]);
+      inputStyles = _ref.inputStyles,
+      rest = _objectWithoutProperties(_ref, ["focus", "autoFocus", "disabled", "value", "onInputFocus", "index", "secure", "inputStyles"]);
 
@@ -70,2 +78,3 @@ var input = (0, _react.useRef)(null);
   return _react2.default.createElement("input", _extends({
+    style: _extends({}, inputDefaultStyles, inputStyles),
     type: secure ? "password" : "tel",
@@ -88,5 +97,6 @@ maxLength: "1",
   value: _propTypes2.default.string,
-  secure: _propTypes2.default.bool
+  secure: _propTypes2.default.bool,
+  inputStyles: _propTypes2.default.object
 };
 
 exports.default = _react2.default.memo(Input);

package.json

@@ -6,3 +6,3 @@ {
   "description": "React functional component for otp input",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": false,
@@ -9,0 +9,0 @@ "main": "dist/index.js",

README.md

@@ -120,6 +120,20 @@ # otp-input-react
   </tr>  
+  <tr>
+    <td>inputStyles</td>
+    <td>Object</td>
+    <td>-</td>
+    <td>-</td>
+    <td>Styles for input element.</td>
+    <td>Working</td>
+  </tr>  
+  <tr>
+    <td>style</td>
+    <td>Object</td>
+    <td>-</td>
+    <td>-</td>
+    <td>Styles for root element.</td>
+    <td>Working</td>
+  </tr>  
 </table>
 
-
-
 ### Contributing
@@ -126,0 +140,0 @@

src/App.js

 import React, { useState } from "react";
 import OTPInput from "./lib";
-import "./style.css";
 
@@ -8,3 +7,7 @@ const OtpInputCard = ({ title, ...rest }) => {
   return (
-    <div className="input__card-wrapper">
+    <div
+      style={{
+        padding: 12
+      }}
+    >
       <div style={{ marginBottom: 12 }}>{title}</div>
@@ -18,3 +21,9 @@ <OTPInput value={OTP} onChange={setOTP} {...rest} />
   return (
-    <div className="flex__center">
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column"
+      }}
+    >
       <h2>OTP Input React</h2>
@@ -63,3 +72,3 @@ <div>
         <OtpInputCard
-          title="Input styling with inputClassName"
+          title="Input styling with inputStyles prop"
           inputClassName="bottom__border"
@@ -70,2 +79,6 @@ // autoFocus
           disabled={false}
+          inputStyles={{
+            border: 0,
+            borderBottom: "1px solid #cbcbcb"
+          }}
           // secure
@@ -72,0 +85,0 @@ />

src/lib/index.js

@@ -5,3 +5,2 @@ // @flow
 import Input from "./Input";
-import "./style.css";
 
@@ -17,3 +16,5 @@ const OtpInput = ({
   className,
-  inputClassName
+  inputClassName,
+  inputStyles,
+  style
 }) => {
@@ -122,2 +123,3 @@ const [activeInput, setActiveInput] = useState(autoFocus ? 0 : -1);
 
+  // Needs to be memorized
   const renderInputs = () => {
@@ -132,2 +134,3 @@ const otp = getOtpValue();
           className={inputClassName}
+          inputStyles={inputStyles}
           key={index}
@@ -153,3 +156,7 @@ focus={activeInput === index}
 
-  return <div className={`otp__input-root ${className}`}>{renderInputs()}</div>;
+  return (
+    <div style={{ display: "flex", ...style }} className={`${className}`}>
+      {renderInputs()}
+    </div>
+  );
 };
@@ -167,3 +174,5 @@
   otpType: PropTypes.oneOf(["number", "any"]),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  inputStyles: PropTypes.object,
+  style: PropTypes.object
 };
@@ -180,5 +189,7 @@
   value: "",
-  otpType: "any"
+  otpType: "any",
+  inputStyles: {},
+  style: {}
 };
 
 export default OtpInput;

src/lib/Input/index.js

 import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 
+const inputDefaultStyles = {
+  width: 32,
+  height: 32,
+  textAlign: "center",
+  marginRight: 20
+};
+
 /**
@@ -25,2 +32,3 @@ * This is react stateless component
   secure,
+  inputStyles,
   ...rest
@@ -51,2 +59,3 @@ }) => {
     <input
+      style={{ ...inputDefaultStyles, ...inputStyles }}
       type={secure ? "password" : "tel"}
@@ -71,5 +80,6 @@ maxLength="1"
   value: PropTypes.string,
-  secure: PropTypes.bool
+  secure: PropTypes.bool,
+  inputStyles: PropTypes.object
 };
 
 export default React.memo(Input);

No alert changes

Improved metrics

Total package byte prevSize

34938

increased by3.23%

Lines of code

744

increased by2.2%

Number of lines in readme file

147

increased by10.53%

Worsened metrics

Number of package files

15

decreased by-16.67%

No dependency changes