npx react-codemod class legacy-js/components/

legacy-js/components/fader.js

@@ -6,18 +6,16 @@ function clamp(min, max, value) {
   return Math.min(Math.max(value, min), max);
 }
 
-module.exports = React.createClass({
-  getDefaultProps() {
-    return {
-      threshold: 100
-    };
-  },
-  getInitialState() {
-    return {
-      opacity: 0
-    };
-  },
-  onScroll() {
+module.exports = class extends React.Component {
+  static defaultProps = {
+    threshold: 100
+  };
+
+  state = {
+    opacity: 0
+  };
+
+  onScroll = () => {
     var scrollableDistance = document.body.scrollHeight - window.innerHeight,
         scrollTop = window.pageYOffset || document.documentElement.scrollTop,
         distanceToBottom = scrollableDistance - scrollTop;
@@ -25,14 +23,17 @@ module.exports = React.createClass({
     this.setState({
       opacity: clamp(0, 1, distanceToBottom / this.props.threshold)
     });
-  },
+  };
+
   componentDidMount() {
     window.addEventListener('scroll', this.onScroll);
     this.onScroll();
-  },
+  }
+
   componentWillUnmount() {
     window.removeEventListener('scroll', this.onScroll);
-  },
+  }
+
   render() {
     var style = {
       opacity: this.state.opacity
@@ -42,4 +43,4 @@ module.exports = React.createClass({
       <div className="fader" style={style}></div>
     )
   }
-});
+};