pass all props through to <input />

components/Input.js

@@ -2,64 +2,36 @@ import React from 'react'
 
 import { COLORS } from '../lib/constants'
 
-const Input = React.forwardRef(
+const Input = React.forwardRef(({ color = COLORS.SECONDARY, align = 'right', ...props }, ref) => (
-  (
+  <React.Fragment>
-    {
+    <input ref={ref} {...props} />
-      accept,
+    <style jsx>
-      color = COLORS.SECONDARY,
+      {`
-      name,
+        input {
-      onChange = () => {},
+          width: 100%;
-      placeholder,
+          font-size: 12px;
-      title,
+          color: ${color};
-      type,
+          background: transparent;
-      value,
+          border: none;
-      align = 'right',
+          outline: none;
-      maxLength
+          text-align: ${align};
-    },
+          overflow: hidden;
-    ref
+          white-space: nowrap;
-  ) => {
+          text-overflow: ellipsis;
-    return (
+        }
-      <React.Fragment>
-        <input
-          ref={ref}
-          type={type}
-          accept={accept}
-          title={title}
-          placeholder={placeholder}
-          value={value}
-          name={name}
-          onChange={onChange}
-          maxLength={maxLength}
-        />
-        <style jsx>
-          {`
-            input {
-              width: 100%;
-              font-size: 12px;
-              color: ${color};
-              background: transparent;
-              border: none;
-              outline: none;
-              text-align: ${align};
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            }
 
-            input::placeholder {
+        input::placeholder {
-              color: ${color};
+          color: ${color};
-              opacity: 0.4;
+          opacity: 0.4;
-            }
+        }
 
-            input[type='file'] {
+        input[type='file'] {
-              cursor: pointer;
+          cursor: pointer;
-              outline: none;
+          outline: none;
-            }
+        }
-          `}
+      `}
-        </style>
+    </style>
-      </React.Fragment>
+  </React.Fragment>
-    )
+))
-  }
-)
 
 export default Input