Examples from "Making Sense of React Hooks"

App.js

import React from "react";
import ReactDOM from "react-dom";
import { useWindowWidth } from "./wrapper";

function MyResponsiveComponent({ width }) {
  return <div className="App">Window width: {width}</div>;
}

const App = useWindowWidth(WindowResize);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

wrapper.js

import React from "react";

export function useWindowWidth(Wrapper) {
  return class Media extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = { width: window.innerWidth };
    }

    componentDidMount() {
      window.addEventListener("resize", this.handleResize);
    }

    componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);
    }

    handleResize = () => {
      this.setState({ width: window.innerWidth });
    };

    render() {
      return <Wrapper width={this.state.width} />;
    }
  };
}