Move to TS. Add some new props. Rewrite as a functional component

.babelrc

@@ -1,9 +1,3 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false
-    }],
-    "stage-0",
-    "react"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"]
 }

.eslintrc

@@ -1,20 +1,42 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["standard", "standard-react"],
   "env": {
-    "es6": true
+    "es6": true,
+    "node": true,
+    "browser": true
   },
-  "plugins": ["react"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "sourceType": "module"
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "requireConfigFile": false
+  },
+  "plugins": ["@typescript-eslint", "react", "import", "react-hooks"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+          "extensions": [".js", ".jsx", ".ts", ".tsx"],
+          "moduleDirectory": ["node_modules", "src/", "example/"]
+      }
+    }
   },
   "rules": {
-    // don't force es6 functions to include space before paren
-    "space-before-function-paren": 0,
-
-    // allow specifying true explicitly for boolean props
-    "react/jsx-boolean-value": 0,
-    "semi": 0,
-    "jsx-quotes": 0
+    "arrow-body-style": ["error", "as-needed"],
+    "semi": [2, "always"],
+    "eqeqeq": ["error", "always"],
+    "import/no-unresolved": [2, { "caseSensitive": true }],
+    "import/order": ["error", { "newlines-between": "always" }],
+    "react/jsx-curly-brace-presence": "error",
+    "react/prop-types": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
   }
 }

.github/workflows/publish.yml

@@ -23,7 +23,7 @@ jobs:
           node-version: 8
           registry-url: https://registry.npmjs.org/
 
-      - run: yarn install
+      - run: npm install
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -9,6 +9,9 @@ build
 dist
 .rpt2_cache
 
+# Coverage directory used by tools like istanbul
+coverage
+
 # misc
 .DS_Store
 .env

README.md

@@ -19,33 +19,58 @@ npm install --save react-verification-code-input
 ## Usage
 
 ```jsx
-import React, { Component } from 'react';
+import React from 'react';
 
 import ReactCodeInput from 'react-verification-code-input';
 
-class Example extends Component {
-  render() {
-    return <ReactCodeInput />;
-  }
-}
+const Example = () => <ReactCodeInput />;
 ```
 
 ## PropTypes
 
-|     Key     |  Type  |              Desc               |
-| :---------: | :----: | :-----------------------------: |
-|    type     |  text  |      one of number or text      |
-|   fields    | number |     The count of characters     |
-|  onChange   |  func  |   Trigger on character change   |
-| onComplete  |  func  | Trigger on all character inputs |
-| fieldWidth  | number |           input width           |
-| fieldHeight | number |          input height           |
-|  autoFocus  |  bool  | auto focus first input on init  |
-|    title    | string |        code input title         |
-|   loading   |  bool  |        show loading flag        |
-|  className  | string |           class name            |
-|   values    | array  |         default values          |
-| placeholder | array  |        input placeholder        |
+| Key              |  Type                   | Default value | Desc                                                                                            |
+| :--------------: | :---------------------: | :-----------: | :---------------------------------------------------------------------------------------------: |
+| type             | `'text' \| 'number'`    | `'number'`    | one of 'number' or 'text'                                                                       |
+| fields           | `number`                | `6`           | The count of characters                                                                         |
+| onChange         | `(val: string) => void` | `undefined`   | Trigger on character change                                                                     |
+| onComplete       | `(val: string) => void` | `undefined`   | Trigger on all character inputs                                                                 |
+| autoFocus        | `boolean`               | `true`        | auto focus first input on init                                                                  |
+| title            | `string`                | `undefined`   | code input title                                                                                |
+| loading          | `boolean`               | `''`          | show loading flag                                                                               |
+| className        | `string`                | `undefined`   | wrapper class name                                                                              |
+| values           | `string \| string[]`    | `undefined`   | default values                                                                                  |
+| placeholder      | `string \| string[]`    | `[]`          | input placeholder. If `string`, the one placeholder will be added to all inputs                 |
+| inputClassNames  | `string \| string[]`    | `[]`          | input classnames. If `string`, the one class will be added to all inputs                        |
+| disabled         | `boolean`               | `false`       | disables all inputs                                                                             |
+| required         | `boolean`               | `false`       | sets all inputs to be required                                                                  |
+| id               | `string`                | `undefined`   | adds id prefix to all inputs. If `id` is not defined, id of each input won't be defined either |
+| loadingComponent | `JSX.Element`           | `Loader`      | custom loader component                                                                         |
+
+## Methods
+You can add `ref` to `ReactCodeInput` component to get access to methods
+
+| Method           | Description                           |
+| :--------------: | :-----------------------------------: |
+| clearValues      | Will clear all inputs                 |
+
+```jsx
+import React from 'react';
+
+import ReactCodeInput from 'react-verification-code-input';
+
+const Example = () => {
+  const codeInput = useRef(null);
+
+  return (
+    <>
+      <button type="button" onClick={() => codeInput.current.clearValues()}>
+        Clean code input
+      </button>
+      <ReactCodeInput ref={codeInput} />
+    </>
+  );
+};
+```
 
 ## License
 

example/package.json

@@ -5,16 +5,24 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "react-verification-code-input": "link:.."
+    "react-verification-code-input": "file:.."
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
+    "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
+    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }