✨ Add placeholder to demo & README

Author: apollonian

README.md

@@ -1,6 +1,9 @@
 # react-otp-input
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://badge.fury.io/js/react-otp-input.svg)](https://badge.fury.io/js/react-otp-input) [![npm](https://img.shields.io/npm/dw/react-otp-input.svg?logo=npm)](https://www.npmjs.com/package/react-otp-input)
@@ -78,6 +81,13 @@ export default class App extends Component {
     <td>''</td>
     <td>The value of the OTP passed into the component.</td>
   </tr>
+    <tr>		
+     <td>placeholder</td>		
+     <td>string</td>		
+     <td>false</td>		
+     <td>none</td>		
+     <td>Specify an expected value of each input. The length of this string should be equal to <code>numInputs</code>.</td>		
+   </tr>
   <tr>
     <td>separator</td>
     <td>component<br/></td>
@@ -201,6 +211,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/demo/index.jsx

@@ -17,6 +17,7 @@ class Demo extends Component {
       isInputNum: false,
       minLength: 0,
       maxLength: 40,
+      placeholder: '',
     };
   }
 
@@ -66,6 +67,7 @@ class Demo extends Component {
       isInputNum,
       minLength,
       maxLength,
+      placeholder,
     } = this.state;
 
     return (
@@ -119,6 +121,18 @@ class Demo extends Component {
               />
             </label>
           </div>
+          <div className="side-bar__segment">
+            <label htmlFor="placeholder">
+              placeholder
+              <input
+                id="placeholder"
+                name="placeholder"
+                type="text"
+                value={placeholder}
+                onChange={this.handleChange}
+              />
+            </label>
+          </div>
           <div className="side-bar__segment">
             <label htmlFor="disabled">
               <input
@@ -177,13 +191,14 @@ class Demo extends Component {
                   isInputNum={isInputNum}
                   shouldAutoFocus
                   value={otp}
+                  placeholder={placeholder}
                 />
               </div>
               <div className="btn-row">
                 <button
                   className="btn margin-top--large"
                   type="button"
-                  disabled={isDisabled || otp.trim() === ""}
+                  disabled={isDisabled || otp.trim() === ''}
                   onClick={this.clearOtp}
                 >
                   Clear

src/lib/index.jsx

@@ -145,12 +145,16 @@ class OtpInput extends Component<Props, State> {
 
   getPlaceholderValue = () => {
     const { placeholder, numInputs } = this.props;
+
     if (typeof placeholder === 'string') {
-      if (placeholder.length === 1) return placeholder.repeat(numInputs);
-      else if (placeholder.length === numInputs) return placeholder;
-      else console.error('Length of the placeholder should be either 1 or equal to the number of inputs');
+      if (placeholder.length === numInputs) {
+        return placeholder;
+      }
+
+      if (placeholder.length > 0) {
+        console.error('Length of the placeholder should be equal to the number of inputs.');
+      }
     }
-    return;
   };
 
   // Helper to return OTP from input