mDibyo

function withHooksSupport(Component) {
  return class ComponentWithHooksSupport extends Component {
    render() {
      const RenderFn = () => super.render();
      return <RenderFn />;
    }
  }
}

mDibyo

function withHooksSupport(Component) {
  return class ComponentWithHooksSupport extends Component {
    render() {
      const withHook = (useHook) => {
        return useHook;
      }

      const WithHook = withHook(() => super.render());
      return <WithHook />;
    }

mDibyo

function withHooksSupport(Component) {
  return class ComponentWithHooksSupport extends Component {
    render() {
      const withHook = (useHook) => {
        return () => useHook();
      }

      const WithHook = withHook(() => super.render());
      return <WithHook />;
    }

mDibyo

function withHooksSupport(Component) {
  return class ComponentWithHooksSupport extends Component {
    render() {
      const withHook = (useHook) => {
        return ({ children }) => {
          const returnValue = useHook();
          return children(returnValue);
        }
      }

mDibyo

function withHooksSupport(Component) {
  return class ComponentWithHooksSupport extends Component {
    render() {
      const WithHook = withHook(() => super.render());
      return (
        <WithHook>
          {superRenderReturnValue => superRenderReturnValue}
        </WithHook>
      );
    }

mDibyo

class withHooksSupport(Component) {
  return class ComponentWithHooksSupport extends Component {
    // TODO
  }
}

mDibyo

class HookedInput extends React.PureComponent {
  render() {
    // `withHook` creates a new function component that calls `useFormInput`
    // that passes the return value to its children.
    const WithFormInputProps = withHook(useFormInput);
    return (
      <WithFormInputProps>
        {({ value, onChange }) => <input value={value} onChange={onChange} />}
      </WithFormInputProps>
    );

mDibyo

import withHooksSupport from 'with-hooks-support';

class Input extends React.PureComponent {
  render() {
    const { value, onChange } = useFormInput('Take 2!');
    return <input value={value} onChange={onChange} />;
  }
}

export default withHooksSupport(Input);

mDibyo

class WindowInfo extends React.PureComponent {
  render() {
    const WithWindowWidth = withHook(() => {
      const [width, setWidth] = useState(window.innerWidth);
      const handleWindowResize = () => setWidth(window.innerWidth);
      useEffect(() => {
        window.addEventListener('resize', handleWindowResize);
        return () => window.removeEventListener('resize', handleWindowResize);
      });

mDibyo

import withHook from 'with-hook';

class HookedInput extends React.PureComponent {
  render() {
    const WithFormInputProps = withHook(useFormInput);

    return (
      <WithFormInputProps>
        {({ value, onChange }) => <input value={value} onChange={onChange} />}
      </WithFormInputProps>