➕ Added placeholder support

Author: aromalanil

src/lib/index.jsx

@@ -9,6 +9,7 @@ const DELETE = 46;
 const SPACEBAR = 32;
 
 type Props = {
+  placeholder: string,
   numInputs: number,
   onChange: Function,
   separator?: Object,
@@ -71,6 +72,7 @@ class SingleOtpInput extends PureComponent<*> {
 
   render() {
     const {
+      placeholder,
       separator,
       isLastChild,
       inputStyle,
@@ -98,6 +100,7 @@ class SingleOtpInput extends PureComponent<*> {
             isDisabled && isStyleObject(disabledStyle) && disabledStyle,
             hasErrored && isStyleObject(errorStyle) && errorStyle
           )}
+          placeholder={placeholder}
           className={this.getClasses(
             inputStyle,
             focus && focusStyle,
@@ -135,6 +138,22 @@ class OtpInput extends Component<Props, State> {
   getOtpValue = () =>
     this.props.value ? this.props.value.toString().split('') : [];
 
+  getPlaceholderValue=()=>{
+    const {placeholder,numInputs}= this.props;
+
+    if(!placeholder) return;
+    
+    if(placeholder.length===1){
+      return placeholder.repeat(numInputs);
+    }
+    else if(placeholder.length===numInputs){
+      return placeholder
+    }
+    else{
+      console.error("Invalid placeholder value");
+    }
+  }
+
   // Helper to return OTP from input
   handleOtpChange = (otp: string[]) => {
     const { onChange } = this.props;
@@ -275,10 +294,11 @@ class OtpInput extends Component<Props, State> {
     } = this.props;
     const otp = this.getOtpValue();
     const inputs = [];
-
+    const placeholder = this.getPlaceholderValue();
     for (let i = 0; i < numInputs; i++) {
       inputs.push(
         <SingleOtpInput
+          placeholder={placeholder && placeholder[i]}
           key={i}
           focus={activeInput === i}
           value={otp && otp[i]}