Merge pull request #1 from coded-bear/master

Master

Author: coded-bear

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "comments": false,
+  "compact": true
+}

.eslintignore

@@ -0,0 +1,2 @@
+# dependencies
+node_modules/

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "no-unused-vars": "off",
+    "react/prop-types": "off"
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+# dependencies
+/node_modules
+
+# builds
+/lib
+/demo

.prettierignore

@@ -0,0 +1,6 @@
+# dependencies
+/node_modules
+
+# builds
+/lib
+/demo

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "arrowParens": "always",
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

README.md

@@ -1,2 +1,111 @@
 # react-otpinput
+
 Customizable OTP Input component for the web built with React.js
+
+## API
+
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Default value</th>
+            <th>Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>value</td>
+            <td>String</td>
+            <td>true</td>
+            <td>''</td>
+            <td>The value of the OTP Input.</td>
+        </tr>
+        <tr>
+            <td>onChange</td>
+            <td>Function</td>
+            <td>true</td>
+            <td>console.log</td>
+            <td>Returns OTP values typed in inputs.</td>
+        </tr>
+        <tr>
+            <td>numInputs</td>
+            <td>Number</td>
+            <td>false</td>
+            <td>4</td>
+            <td>Number of inputs.</td>
+        </tr>
+        <tr>
+            <td>onChangeRegex</td>
+            <td>RegEx</td>
+            <td>false</td>
+            <td>none</td>
+            <td>RegEx for single onChange.</td>
+        </tr>
+        <tr>
+            <td>labelText</td>
+            <td>String</td>
+            <td>false</td>
+            <td>'Enter verification code'</td>
+            <td>Aria-label attribute for inputs.</td>
+        </tr>
+        <tr>
+            <td>classNames</td>
+            <td>String</td>
+            <td>false</td>
+            <td>'otp-input'</td>
+            <td>Class names for OTP Input component.</td>
+        </tr>
+        <tr>
+            <td>autoComplete</td>
+            <td>String</td>
+            <td>false</td>
+            <td>'off'</td>
+            <td>AutoComplete props for first input.</td>
+        </tr>
+        <tr>
+            <td>autoFocus</td>
+            <td>Boolean</td>
+            <td>false</td>
+            <td>false</td>
+            <td>AutoFocus on first input.</td>
+        </tr>
+        <tr>
+            <td>separator</td>
+            <td>Component</td>
+            <td>false</td>
+            <td>none</td>
+            <td>Separator between inputs.</td>
+        </tr>
+        <tr>
+            <td>isTypeNumber</td>
+            <td>Boolean</td>
+            <td>false</td>
+            <td>false</td>
+            <td>Type number for inputs.</td>
+        </tr>
+        <tr>
+            <td>hasErrored</td>
+            <td>Boolean</td>
+            <td>false</td>
+            <td>false</td>
+            <td>Error class 'otp-input--has-errored' for otp-input component.</td>
+        </tr>
+        <tr>
+            <td>inputProps</td>
+            <td>Object</td>
+            <td>false</td>
+            <td>none</td>
+            <td>Props for inputs.</td>
+        </tr>
+    </tbody>
+</table>
+
+## Development
+
+#### Run the development server:
+
+```
+npm run dev
+```