Merge pull request #11 from devfolioco/input-restrict-num

Prop to restrict input to numbers

Author: ajayns

README.md

@@ -122,6 +122,13 @@ export default class App extends Component {
     <td>false</td>
     <td>Auto focuses input on inital page load.</td>
   </tr>
+  <tr>
+    <td>isInputNum</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>Restrict input to only numbers.</td>
+  </tr>
 </table>
 
 ## Development

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-otp-input",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A fully customizable, one-time password input component for the web built with React",
   "main": "lib/index.js",
   "scripts": {

package.json

@@ -12,6 +12,7 @@ class Demo extends Component {
       separator: '-',
       isDisabled: false,
       hasErrored: false,
+      isInputNum: false,
     };
   }
 
@@ -34,7 +35,7 @@ class Demo extends Component {
   };
 
   render() {
-    const { otp, numInputs, separator, isDisabled, hasErrored } = this.state;
+    const { otp, numInputs, separator, isDisabled, hasErrored, isInputNum } = this.state;
 
     return (
       <div className="container">
@@ -93,6 +94,18 @@ class Demo extends Component {
               Error
             </label>
           </div>
+          <div className="side-bar__segment">
+            <label htmlFor="isInputNum">
+              <input
+                id="isInputNum"
+                name="isInputNum"
+                type="checkbox"
+                checked={isInputNum}
+                onChange={this.handleCheck}
+              />
+              Input numbers only
+            </label>
+          </div>
           <div className="side-bar__segment side-bar__segment--bottom">
             <a href="https://github.com/ajayns/react-otp-input">
               Documentation and Source
@@ -119,6 +132,7 @@ class Demo extends Component {
                   errorStyle="error"
                   onChange={this.handleOtpChange}
                   separator={<span>{separator}</span>}
+                  isInputNum={isInputNum}
                   shouldAutoFocus
                 />
               </div>

src/demo/index.jsx

@@ -19,6 +19,7 @@ type Props = {
   hasErrored?: boolean,
   errorStyle?: Object,
   shouldAutoFocus?: boolean,
+  isInputNum?: boolean,
 };
 
 type State = {
@@ -76,9 +77,12 @@ class SingleOtpInput extends PureComponent<*> {
       focusStyle,
       disabledStyle,
       shouldAutoFocus,
+      isInputNum,
       ...rest
     } = this.props;
 
+    const numValueLimits = isInputNum ? { min: 0, max: 9 } : {};
+
     return (
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <input
@@ -94,7 +98,8 @@ class SingleOtpInput extends PureComponent<*> {
             isDisabled && disabledStyle,
             hasErrored && errorStyle
           )}
-          type="tel"
+          type={isInputNum ? 'number' : 'tel'}
+          {...numValueLimits}
           maxLength="1"
           ref={input => {
             this.input = input;
@@ -227,6 +232,7 @@ class OtpInput extends Component<Props, State> {
       hasErrored,
       errorStyle,
       shouldAutoFocus,
+      isInputNum,
     } = this.props;
     const inputs = [];
 
@@ -255,6 +261,7 @@ class OtpInput extends Component<Props, State> {
           hasErrored={hasErrored}
           errorStyle={errorStyle}
           shouldAutoFocus={shouldAutoFocus}
+          isInputNum={isInputNum}
         />
       );
     }