Typings added for the component (#77)

Author: sirajalam049

README.md

@@ -87,7 +87,7 @@ const ReactCodeInput = dynamic(import('react-code-input'));
 |:---|:---|:---|
 | type | string | Only types like: `text`, `number`, `password` and `tel` are accepted.|
 | fields | number | Allowed amount of characters to enter. |
-| value | string | Setting the initial value of code input field. |
+| value | string | Setting the value of code input field. |
 | name | string | Setting the name of component. |
 | onChange | func | Function, which is called whenever there is a change of value in the input box. |
 | touch | func | Marks the given fields as "touched" to show errors. |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-code-input",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "React component for entering and validating numbers, text or password.",
   "main": "dist/ReactCodeInput.js",
   "scripts": {
@@ -121,4 +121,4 @@
     "react": "^15.5.4 || ^16.2.0",
     "react-dom": "^15.5.4 || ^16.2.0"
   }
-}
+}

src/ReactCodeInput.d.ts

@@ -0,0 +1,76 @@
+// Type definitions for react-code-input 3.8.2
+// Project: React Code Input
+// Definitions by: Siraj Alam https://github.com/sirajalam049
+
+import React, { Component } from 'react';
+
+export type InputModeTypes =
+    'verbatim' | 'latin' | 'latin-name' | 'latin-prose' |
+    'full-width-latin' | 'kana' | 'kana-name' | 'katakana' |
+    'numeric' | 'tel' | 'email' | 'url'
+
+export interface ReactCodeInputProps {
+
+    // Type of input accept
+    type?: 'text' | 'number' | 'password' | 'tel'
+
+    // Allowed amount of characters to enter.
+    fields?: number
+
+    // Value of the input
+    value?: string
+
+    // Get the full value of the input on every change
+    onChange?: (value: string) => void
+
+    // Setting the name of component. 
+    name: string
+
+    // Marks the given fields as "touched" to show errors. 
+    touch?: (name: string) => void
+
+    // Clears the "touched" flag for the given fields. 
+    untouch?: (name: string) => void
+
+    // Add classname to the root element.
+    className?: string
+
+    isValid?: boolean
+
+    // When present, it specifies that the element should be disabled. 
+    disabled?: boolean
+
+    // Setting the styles of container element.
+    style?: React.CSSProperties
+
+    // Setting the styles of each input field.
+    inputStyle?: React.CSSProperties
+
+    // Setting the styles of each input field if isValid prop is false.
+    inputStyleInvalid?: React.CSSProperties
+
+    // Setup autofocus on the first input, true by default. 
+    autoFocus?: boolean
+
+    // 
+    forceUppercase?: boolean
+
+    // Filter characters on key down.
+    filterKeyCodes?: Array<number>
+
+    // Filter characters.
+    filterChars?: Array<string>
+
+    // The pattern prop specifies a regular expression that the element's value is checked against.
+    pattern?: string
+
+    // The inputMode prop tells the browser on devices with dynamic keyboards which keyboard to display.
+    inputMode: InputModeTypes
+
+}
+
+declare class ReactCodeInput extends Component<ReactCodeInputProps, any> {
+    constructor(props: ReactCodeInputProps);
+}
+
+export default ReactCodeInput

src/ReactCodeInput.js

@@ -65,10 +65,10 @@ class ReactCodeInput extends Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
-                    isValid:  nextProps.isValid,
-                    value:    nextProps.value,
-                    disabled: nextProps.disabled,
-                  });
+      isValid: nextProps.isValid,
+      value: nextProps.value,
+      disabled: nextProps.disabled,
+    });
   }
 
   handleBlur(e) {