Updated to react 16 and rewrote FileInput with ES6 class

lib/index.js

@@ -1,65 +1,55 @@
-var React = require('react');
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
-var FileInput = React.createClass({
-  getInitialState: function() {
-    return {
-      value: '',
-      styles: {
-        parent: {
-          position: 'relative'
-        },
-        file: {
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          opacity: 0,
-          width: '100%',
-          zIndex: 1
-        },
-        text: {
-          position: 'relative',
-          zIndex: -1
-        }
-      }
-    };
-  },
+class FileInput extends Component {
+  static propTypes={
+    name: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    accept: PropTypes.string,
+    onChange: PropTypes.func,
+  };
 
-  handleChange: function(e) {
+  state={
+    value: '',
+  };
+
+  handleChange(e) {
     this.setState({
-      value: e.target.value.split(/(\\|\/)/g).pop()
+      value: e.target.value.split(/(\\|\/)/g).pop(),
     });
     if (this.props.onChange) this.props.onChange(e);
-  },
-
-  render: function() {
-    return React.DOM.div({
-        style: this.state.styles.parent
-      },
-
-      // Actual file input
-      React.DOM.input({
-        type: 'file',
-        name: this.props.name,
-        className: this.props.className,
-        onChange: this.handleChange,
-        disabled: this.props.disabled,
-        accept: this.props.accept,
-        style: this.state.styles.file
-      }),
+  }
 
-      // Emulated file input
-      React.DOM.input({
-        type: 'text',
-        tabIndex: -1,
-        name: this.props.name + '_filename',
-        value: this.state.value,
-        className: this.props.className,
-        onChange: function() {},
-        placeholder: this.props.placeholder,
-        disabled: this.props.disabled,
-        style: this.state.styles.text
-      }));
+  render() {
+    return (
+      <div>
+        <input
+          type="file"
+          style={{ cursor: 'pointer',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            opacity: 0,
+            width: '100%',
+            zIndex: 1 }}
+          name={this.props.name}
+          accept={this.props.accept}
+          className={this.props.className}
+          onChange={e => this.handleChange(e)}
+        />
+        <input
+          type="text"
+          tabIndex="-1"
+          value=""
+          name={this.props.name}
+          className={this.props.className}
+          style={{ position: 'relative', zIndex: -1 }}
+        />
+      </div>
+    );
   }
-});
+}
 
-module.exports = FileInput;
+export default FileInput;

package.json

@@ -26,5 +26,8 @@
   "homepage": "https://github.com/captivationsoftware/react-file-input",
   "peerDependencies": {
     "react": "0.x"
+  },
+  "dependencies": {
+    "react": "^16.2.0"
   }
 }