✨ Error props and styling

Author: ajayns

src/docs/index.jsx

@@ -11,6 +11,7 @@ class Demo extends Component {
       numInputs: 4,
       separator: '-',
       isDisabled: false,
+      hasErrored: false,
     };
   }
 
@@ -22,8 +23,9 @@ class Demo extends Component {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  handleCheck = () => {
-    this.setState(prevState => ({ isDisabled: !prevState.isDisabled }));
+  handleCheck = e => {
+    const { name } = e.target;
+    this.setState(prevState => ({ [name]: !prevState[name] }));
   };
 
   handleSubmit = e => {
@@ -32,7 +34,7 @@ class Demo extends Component {
   };
 
   render() {
-    const { otp, numInputs, separator, isDisabled } = this.state;
+    const { otp, numInputs, separator, isDisabled, hasErrored } = this.state;
 
     return (
       <div className="container">
@@ -79,6 +81,18 @@ class Demo extends Component {
               Disabled
             </label>
           </div>
+          <div className="side-bar__segment">
+            <label htmlFor="hasErrored">
+              <input
+                id="hasErrored"
+                name="hasErrored"
+                type="checkbox"
+                checked={hasErrored}
+                onChange={this.handleCheck}
+              />
+              Error
+            </label>
+          </div>
           <div className="side-bar__segment side-bar__segment--bottom">
             <a href="https://github.com/ajayns/react-otp-input">
               Documentation and Source
@@ -100,7 +114,11 @@ class Demo extends Component {
                     border: '1px solid rgba(0,0,0,0.3)',
                   }}
                   numInputs={numInputs}
-                  disabled={isDisabled}
+                  isDisabled={isDisabled}
+                  hasErrored={hasErrored}
+                  errorStyle={{
+                    border: '1px solid red',
+                  }}
                   onChange={this.handleOtpChange}
                   separator={<span>{separator}</span>}
                   shouldAutoFocus

src/lib/index.jsx

@@ -14,8 +14,10 @@ type Props = {
   containerStyle?: Object,
   inputStyle?: Object,
   focusStyle?: Object,
-  disabled?: boolean,
+  isDisabled?: boolean,
   disabledStyle?: Object,
+  hasErrored?: boolean, 
+  errorStyle?: Object,
   shouldAutoFocus?: boolean,
 };
 
@@ -60,7 +62,9 @@ class SingleOtpInput extends PureComponent<*> {
       isLastChild,
       inputStyle,
       focus,
-      disabled,
+      isDisabled,
+      hasErrored,
+      errorStyle,
       focusStyle,
       disabledStyle,
       ...rest
@@ -73,14 +77,15 @@ class SingleOtpInput extends PureComponent<*> {
             { width: '1em', textAlign: 'center' },
             inputStyle,
             focus && focusStyle,
-            disabled && disabledStyle
+            isDisabled && disabledStyle,
+            hasErrored && errorStyle
           )}
           type="tel"
           maxLength="1"
           ref={input => {
             this.input = input;
           }}
-          disabled={disabled}
+          disabled={isDisabled}
           {...rest}
         />
         {!isLastChild && separator}
@@ -93,7 +98,7 @@ class OtpInput extends Component<Props, State> {
   static defaultProps = {
     numInputs: 4,
     onChange: (otp: number): void => console.log(otp),
-    disabled: false,
+    isDisabled: false,
     shouldAutoFocus: false,
   };
 
@@ -203,8 +208,10 @@ class OtpInput extends Component<Props, State> {
       inputStyle,
       focusStyle,
       separator,
-      disabled,
+      isDisabled,
       disabledStyle,
+      hasErrored,
+      errorStyle,
       shouldAutoFocus,
     } = this.props;
     const inputs = [];
@@ -228,8 +235,10 @@ class OtpInput extends Component<Props, State> {
           inputStyle={inputStyle}
           focusStyle={focusStyle}
           isLastChild={i === numInputs - 1}
-          disabled={disabled}
+          isDisabled={isDisabled}
           disabledStyle={disabledStyle}
+          hasErrored={hasErrored}
+          errorStyle={errorStyle}
           shouldAutoFocus={shouldAutoFocus}
         />
       );