Feature backspace to clear current input

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-env"]
+}

.travis.yml

@@ -1,13 +1,27 @@
 sudo: false
-
 language: node_js
-
 node_js:
   - node
-
+notifications:
+  email: false
 script:
   - npm run lint
-  - npm run test:coveralls 
-
-notifications:
-  email: false
+  - npm run test:coveralls
+  - npm run demo
+  - npm run build
+deploy:
+  # - provider: npm
+  #   email: [email protected]
+  #   skip_cleanup: true
+  #   api_key:
+  #     secure: 5wzvq7ynxRWpt2QeJ4LajXCWp/3Psf+WJYr7vlQX6wZsQTPoTuzgUfhslztklTSK42MElCHmtC9IAdbJoitX9jgISQyp0u1SD8Plw92eGJKU5Bo2Cn+3MkNxRnWqt4avjxffcwBenOCts52wab2tLJ/8wmBa4daC8AuCjcBls3xTn+TfmvSq0mQalRJUWkLZwotrPUYEshqMVfo7H+pum2pQDAsYWDhTOpcw46bKi2ylDh5M398kSETiNdDzAYgH/PEgqGAcskY6dJbd6UpldIgMM/i04loeilJTVlhJq04ssMl0eGFLOLbD/QtvB0fvk0Kripy092PFrgj5Gv7XOUpfzSGrdpcY3MEuSF/7+ZJQEh/NT1Dc5JO4PjfVObygumK/7tZu3MgA2XoMCQTYfNE9RD61C1XvQ+r58simnY8hMTiKVkZewqfMgagXzNs7r4lbp9cqis8ObF9/T3PH8HD/NVDBVwHoyfC5K2gpQnVh0l1RS034POjnPKKhe/2ulpFMtPJfX05WazcCn9+rjg+rikCfefYaAPR1N1CwwDKDHLYVbHkHZXS298CIvIXozRJyb+1tsTLWmwljB8+LYMS428j0Ii5VtoZzyTJUb9TSf+9U9KhYE/ZLBBDafcf3C1+GMCZ3xTicq1ndHOOy2K19RaSqPp4NlzSjCrR6Ims=
+  #   on:
+  #     tags: true
+  #     repo: shubhanus/otp-input-react
+  - provider: releases
+    skip_cleanup: true
+    api_key:
+      secure: y4U450yebWWKNELYHNq2j5NV9S4tWvvC5XqWQKYYtbFgZT3yt+SVyFfOvZ6rpARMBPKvl2LPzLuShy9isiSU8/TRrlFRG/A62WfNUZTWtOKiokBQWEsFNRNxHCPF0wp7yIWagEV433NxJB9fzbEbeq4kGW2NDewtQgbPQZkGPXhs5oXB+ef7WcQQzjsNnErMyUuelLbIadFIbAfoUEYD9k56Q4Rrdg1UcLEG/B4tqgS9CuFFJY4A/Yz8ZU18hoDgL6ZMVpWAVBitiGH6fYhJ45V88v2cOHpwgUpAfkH3rH/qhSLNqCWKcR9fvkoz/qn3h534xburCIM6WqeHhNo2smXmrgI7EOTZouP3phTfM7/aZ3Cb9DxJvoJjZwx/5M8C4K2Vgjt36g3nJ7JXTfi1iQeXLFO/WCeErMq2Uszv5w8gsIyZ7R1bmj9h5+V9Ndgk8Z8OZUTgD3KxNSM6pB9uRpQXIJKffU1z6JhZQJp1kIJqyEJ8doCbOpE5rzeK4g91fUSTTram6WwwpSxDN0oLICq9yb9Q8IzM5zTKXvk2O9ZeagoRW2iNYS4mTAnUas/KSJh0dpVYPkABzkaZcgm0Cp/UsL9gHP+bGY5MKR3N2pwnNQMnZiZ7tscSm+zSUVpwbg6uicxu3f3UqvSdvFxiu0aZ1KGWaYkvDKaPJGVISPs=
+    file: demo
+    on:
+      repo: shubhanus/otp-input-react

README.md

@@ -4,7 +4,9 @@ A fully customizable, one-time password input with resend OTP component for the
 
 ![NPM](https://img.shields.io/npm/l/otp-input-react?style=flat-square)
 
-<!-- [![Build Status](https://travis-ci.org/shubhanus/otp-input-react.svg?branch=master)](https://travis-ci.org/shubhanus/otp-input-react) -->
+
+[![Build Status](https://travis-ci.org/shubhanus/otp-input-react.svg?branch=master)](https://travis-ci.org/shubhanus/otp-input-react)
+
 
 [![Coverage Status](https://coveralls.io/repos/github/shubhanus/otp-input-react/badge.svg?branch=master)](https://coveralls.io/github/shubhanus/otp-input-react?branch=master)
 
@@ -37,8 +39,7 @@ function App() {
       disabled={false}
       secure
     />
-    <ResendOTP onResendClick={() => console.log("Resend clicked")} />
-  );
+    <ResendOTP handelResendClick={() => console.log("Resend clicked")} />
 }
 ```
 

dist/components/Input.js

@@ -0,0 +1,110 @@
+"use strict";
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var inputDefaultStyles = {
+  width: 32,
+  height: 32,
+  textAlign: "center",
+  marginRight: 20
+};
+/**
+ * This is react stateless component
+ * Renders an input box
+ * @param {Object} {
+ *   focus,
+ *   autoFocus,
+ *   disabled,
+ *   value,
+ *   secure,
+ *   ...rest
+ * }
+ * @returns
+ */
+
+var Input = function Input(_ref) {
+  var focus = _ref.focus,
+      autoFocus = _ref.autoFocus,
+      disabled = _ref.disabled,
+      value = _ref.value,
+      onInputFocus = _ref.onInputFocus,
+      index = _ref.index,
+      secure = _ref.secure,
+      inputStyles = _ref.inputStyles,
+      rest = _objectWithoutProperties(_ref, ["focus", "autoFocus", "disabled", "value", "onInputFocus", "index", "secure", "inputStyles"]);
+
+  var input = (0, _react.useRef)(null);
+  var componentMounted = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    // When component mounts
+    if (autoFocus && focus) {
+      input.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  (0, _react.useEffect)(function () {
+    // When component focus updates
+    if (componentMounted.current && focus) {
+      input.current.focus();
+    }
+
+    componentMounted.current = true; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focus]);
+
+  var handelInputFocus = function handelInputFocus(event) {
+    return onInputFocus(index, event);
+  };
+
+  return _react.default.createElement("input", _extends({
+    style: _objectSpread({}, inputDefaultStyles, {}, inputStyles),
+    type: secure ? "password" : "tel",
+    maxLength: "1",
+    ref: input,
+    disabled: disabled,
+    onFocus: handelInputFocus,
+    value: value || ""
+  }, rest));
+};
+
+Input.propTypes = {
+  focus: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
+  numInputs: _propTypes.default.number,
+  index: _propTypes.default.number.isRequired,
+  onChange: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  value: _propTypes.default.string,
+  secure: _propTypes.default.bool,
+  inputStyles: _propTypes.default.object
+};
+
+var _default = _react.default.memo(Input);
+
+exports.default = _default;

dist/components/OTPReader.js

@@ -0,0 +1,123 @@
+"use strict";
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _useOTP2 = _interopRequireDefault(require("../hooks/useOTP"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var OtpInput = function OtpInput(_ref) {
+  var OTPLength = _ref.OTPLength,
+      disabled = _ref.disabled,
+      autoFocus = _ref.autoFocus,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      onChange = _ref.onChange,
+      otpType = _ref.otpType,
+      secure = _ref.secure,
+      className = _ref.className,
+      inputClassName = _ref.inputClassName,
+      inputStyles = _ref.inputStyles,
+      style = _ref.style;
+
+  var _useOTP = (0, _useOTP2.default)({
+    autoFocus: autoFocus,
+    value: value,
+    otpType: otpType,
+    onChange: onChange,
+    OTPLength: OTPLength
+  }),
+      activeInput = _useOTP.activeInput,
+      getOtpValue = _useOTP.getOtpValue,
+      handleOnChange = _useOTP.handleOnChange,
+      handleOnKeyDown = _useOTP.handleOnKeyDown,
+      handelOnInput = _useOTP.handelOnInput,
+      handleOnPaste = _useOTP.handleOnPaste,
+      onInputFocus = _useOTP.onInputFocus; // Needs to be memorized
+
+
+  var renderInputs = (0, _react.useMemo)(function () {
+    var otp = getOtpValue();
+    var inputs = []; // eslint-disable-next-line no-plusplus
+
+    for (var index = 0; index < OTPLength; index++) {
+      inputs.push(_react.default.createElement(_Input.default, {
+        className: inputClassName,
+        inputStyles: inputStyles,
+        key: index,
+        focus: activeInput === index,
+        value: otp[index],
+        onChange: handleOnChange,
+        onKeyDown: handleOnKeyDown,
+        onInput: handelOnInput,
+        onPaste: handleOnPaste,
+        onInputFocus: onInputFocus,
+        index: index // onBlur={() => setActiveInput(-1)}
+        ,
+        disabled: disabled,
+        autoFocus: autoFocus,
+        secure: secure,
+        "data-testid": "input"
+      }));
+    }
+
+    return inputs;
+  }, [getOtpValue, OTPLength, inputClassName, inputStyles, activeInput, handleOnChange, handleOnKeyDown, handelOnInput, handleOnPaste, onInputFocus, disabled, autoFocus, secure]);
+  return _react.default.createElement("div", {
+    style: _objectSpread({
+      display: "flex"
+    }, style),
+    className: "".concat(className),
+    "data-testid": "otp-input-root"
+  }, renderInputs);
+};
+
+OtpInput.propTypes = {
+  className: _propTypes.default.string,
+  inputClassName: _propTypes.default.string,
+  OTPLength: _propTypes.default.number,
+  onChange: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
+  secure: _propTypes.default.bool,
+  otpType: _propTypes.default.oneOf(["number", "alpha", "alphanumeric", "any"]),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  inputStyles: _propTypes.default.object,
+  style: _propTypes.default.object
+};
+OtpInput.defaultProps = {
+  className: "",
+  inputClassName: "",
+  OTPLength: 4,
+  onChange: function onChange() {},
+  disabled: false,
+  secure: false,
+  autoFocus: false,
+  value: "",
+  otpType: "any",
+  inputStyles: {},
+  style: {}
+};
+var _default = OtpInput;
+exports.default = _default;

dist/components/ResendOTP.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _resendOTP = _interopRequireDefault(require("../hooks/resendOTP"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ResendOTP(_ref) {
+  var renderTime = _ref.renderTime,
+      renderButton = _ref.renderButton,
+      style = _ref.style,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, ["renderTime", "renderButton", "style", "className"]);
+
+  var _useResendOTP = (0, _resendOTP.default)(props),
+      remainingTime = _useResendOTP.remainingTime,
+      handelResendClick = _useResendOTP.handelResendClick;
+
+  return _react.default.createElement("div", {
+    className: className || "",
+    "data-testid": "otp-resend-root",
+    style: _objectSpread({
+      display: "flex",
+      justifyContent: "space-between"
+    }, style)
+  }, renderTime ? renderTime(remainingTime) : _react.default.createElement("span", null, remainingTime, " sec"), renderButton ? renderButton({
+    disabled: remainingTime !== 0,
+    onClick: handelResendClick,
+    remainingTime: remainingTime
+  }) : _react.default.createElement("button", {
+    disabled: remainingTime !== 0,
+    onClick: handelResendClick
+  }, "Resend OTP"));
+}
+
+ResendOTP.defaultProps = {
+  maxTime: 60,
+  timeInterval: 1000,
+  style: {}
+};
+ResendOTP.propTypes = {
+  onTimerComplete: _propTypes.default.func,
+  onResendClick: _propTypes.default.func,
+  renderTime: _propTypes.default.func,
+  renderButton: _propTypes.default.func,
+  maxTime: _propTypes.default.number,
+  timeInterval: _propTypes.default.number,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string
+};
+var _default = ResendOTP;
+exports.default = _default;