fix#115 : Add isSecure property

README.md

@@ -155,6 +155,13 @@ export default class App extends Component {
     <td>false</td>
     <td>Restrict input to only numbers.</td>
   </tr>
+    <tr>
+    <td>isSecure</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>Masks input characters.</td>
+  </tr>
 </table>
 
 ## Breaking changes when porting to v1.0.0

src/demo/index.jsx

@@ -15,6 +15,7 @@ class Demo extends Component {
       isDisabled: false,
       hasErrored: false,
       isInputNum: false,
+      isSecure: false,
       minLength: 0,
       maxLength: 40,
     };
@@ -64,6 +65,7 @@ class Demo extends Component {
       isDisabled,
       hasErrored,
       isInputNum,
+      isSecure,
       minLength,
       maxLength,
     } = this.state;
@@ -155,6 +157,18 @@ class Demo extends Component {
               isInputNum
             </label>
           </div>
+          <div className="side-bar__segment">
+            <label htmlFor="isSecure">
+              <input
+                id="isSecure"
+                name="isSecure"
+                type="checkbox"
+                checked={isSecure}
+                onChange={this.handleCheck}
+              />
+              isSecure
+            </label>
+          </div>
           <div className="side-bar__segment side-bar__segment--bottom">
             <a href="https://github.com/devfolioco/react-otp-input">
               Documentation and Source
@@ -175,6 +189,7 @@ class Demo extends Component {
                   onChange={this.handleOtpChange}
                   separator={<span>{separator}</span>}
                   isInputNum={isInputNum}
+                  isSecure={isSecure}
                   shouldAutoFocus
                   value={otp}
                 />

src/lib/index.jsx

@@ -24,6 +24,7 @@ type Props = {
   isInputNum?: boolean,
   value?: string,
   className?: string,
+  isSecure?: boolean
 };
 
 type State = {
@@ -69,6 +70,12 @@ class SingleOtpInput extends PureComponent<*> {
 
   getClasses = (...classes) =>
     classes.filter(c => !isStyleObject(c) && c !== false).join(' ');
+
+  getType = () => {
+    if (this.props.isSecure) return 'password'
+    if (this.props.isInputNum) return 'tel'
+    return 'text' 
+  }
 
   render() {
     const {
@@ -86,6 +93,7 @@ class SingleOtpInput extends PureComponent<*> {
       isInputNum,
       value,
       className,
+      isSecure,
       ...rest
     } = this.props;
 
@@ -110,7 +118,7 @@ class SingleOtpInput extends PureComponent<*> {
             isDisabled && disabledStyle,
             hasErrored && errorStyle
           )}
-          type={isInputNum ? 'tel' : 'text'}
+          type={this.getType()}
           maxLength="1"
           ref={input => {
             this.input = input;
@@ -132,6 +140,7 @@ class OtpInput extends Component<Props, State> {
     isDisabled: false,
     shouldAutoFocus: false,
     value: '',
+    isSecure:false
   };
 
   state = {
@@ -287,7 +296,8 @@ class OtpInput extends Component<Props, State> {
       errorStyle,
       shouldAutoFocus,
       isInputNum,
-      className,
+      isSecure,
+      className
     } = this.props;
     const otp = this.getOtpValue();
     const inputs = [];
@@ -318,6 +328,7 @@ class OtpInput extends Component<Props, State> {
           errorStyle={errorStyle}
           shouldAutoFocus={shouldAutoFocus}
           isInputNum={isInputNum}
+          isSecure={isSecure}
           className={className}
         />
       );