Using React Hooks inside class components with TypeScript

IdleStateRecognition.tsx

import * as React from 'react';
import { useIdle } from 'react-use';

interface Props {
  timeoutMs: number;
  children: (data: boolean) => React.ReactElement | null;
}

const IdleStateRecognition: React.FunctionComponent<Props> = ({ children, timeoutMs }) => {
  const isIdle = useIdle(timeoutMs);

  return children(isIdle);
}

Usage:

const ONE_MINUTE_IN_MILLISECONDS = 60 * 10e3;

class MyLegacyClassComponent extends React.Component {
  render() {
    return (
      <IdleStateRecognition timeoutMs={ONE_MINUTE_IN_MILLISECONDS}>
        {isIdle => {
          if (isIdle) {
            return <div>Stopped due to inactivity.</div>
          }

          return <ComputationallyExpensiveComponent />
        }
        }
      </IdleStateRecognition>
    )
  }
}