✨ Classnames support

Author: ajayns

src/docs/index.jsx

@@ -116,9 +116,7 @@ class Demo extends Component {
                   numInputs={numInputs}
                   isDisabled={isDisabled}
                   hasErrored={hasErrored}
-                  errorStyle={{
-                    border: '1px solid red',
-                  }}
+                  errorStyle="error"
                   onChange={this.handleOtpChange}
                   separator={<span>{separator}</span>}
                   shouldAutoFocus

src/docs/styles.css

@@ -107,3 +107,7 @@ a {
 .margin-top--large {
   margin-top: 4rem;
 }
+
+.error {
+  border: 1px solid red !important;
+}

src/lib/index.jsx

@@ -16,7 +16,7 @@ type Props = {
   focusStyle?: Object,
   isDisabled?: boolean,
   disabledStyle?: Object,
-  hasErrored?: boolean, 
+  hasErrored?: boolean,
   errorStyle?: Object,
   shouldAutoFocus?: boolean,
 };
@@ -26,6 +26,8 @@ type State = {
   otp: string[],
 };
 
+const isObject = obj => typeof obj === 'object';
+
 class SingleOtpInput extends PureComponent<*> {
   input: ?HTMLInputElement;
 
@@ -56,6 +58,8 @@ class SingleOtpInput extends PureComponent<*> {
     }
   }
 
+  getClasses = (...classes) => classes.filter(c => !isObject(c) && c !== false).join(' ');
+
   render() {
     const {
       separator,
@@ -76,6 +80,11 @@ class SingleOtpInput extends PureComponent<*> {
           style={Object.assign(
             { width: '1em', textAlign: 'center' },
             inputStyle,
+            focus && isObject(focusStyle) && focusStyle,
+            isDisabled && isObject(disabledStyle) && disabledStyle,
+            hasErrored && isObject(errorStyle) && errorStyle
+          )}
+          className={this.getClasses(
             focus && focusStyle,
             isDisabled && disabledStyle,
             hasErrored && errorStyle
@@ -251,7 +260,7 @@ class OtpInput extends Component<Props, State> {
     const { containerStyle } = this.props;
 
     return (
-      <div style={{ display: 'flex', ...containerStyle }}>
+      <div style={Object.assign({ display: 'flex' }, isObject(containerStyle) && containerStyle )} className={!isObject(containerStyle) && containerStyle}>
         {this.renderInputs()}
       </div>
     );