Creating a new branch for adding an input mask

ryanwiemer · Jun 12, 2017 · ef78d80 · ef78d80
1 parent 7771a6c
commit ef78d80
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,8 @@
     "npm-run-all": "^4.0.2",
     "path": "^0.12.7",
     "react-scripts": "1.0.7",
-    "smoothscroll-polyfill": "^0.3.5"
+    "react-text-mask": "^5.0.2",
+    "smoothscroll-polyfill": "^0.3.5",
+    "text-mask-addons": "^3.5.1"
   }
 }
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import MaskedTextInput from 'react-text-mask';
+import { createNumberMask } from 'text-mask-addons';
 
 class Calculator extends Component {
   constructor() {
@@ -90,21 +92,22 @@ class Calculator extends Component {
       <div className="calculator-container">
       <div className="calculator">
           <div className="input-container">
-            <input
+            <MaskedTextInput
+              mask={[/[1-9]/,/[1-9]/,/[1-9]/,/[1-9]/]}
+              guide="false"
               className="input input--blood"
               name="blood"
-              type="number"
+              type="text"
               placeholder="Blood Glucose"
-              step="1"
               value = {this.state.blood}
               onChange={(event) => this.setState({ blood: event.target.value })}
             />
-            <input
+            <MaskedTextInput
+              mask={[/[1-9]/,/[1-9]/,/[1-9]/,/[1-9]/]}
               className="input input--isig"
               name="isig"
-              type="number"
+              type="text"
               placeholder="ISIG"
-              step=".1"
               value = {this.state.isig}
               onChange={(event) => this.setState({ isig: event.target.value })}
             />