Conditionally enable react-scan

[jordan-cutler]

Question

Hi there 👋, the README suggests the following to use react-scan programmatically:

import { scan } from 'react-scan'; // import this BEFORE react
import React from 'react';

if (typeof window !== 'undefined') {
  scan({
    enabled: true,
    log: true, // logs render info to console (default: false)
  });
}

However, if we want to only load react-scan in local builds, and allow for easy enabling and disabling, is that possible? If so, how?

Ideal API

My ideal API would be something like this:

import React from 'react';

function enableScanning() {
  import('react-scan').then(({ scan }) => {
    scan({
      enabled: true,
      log: true,
    });
  });
}

const AdminPanel = () => {
   return (
       ...
      <button onClick={enableScanning}>Enable React Scan</button>
      <button onClick={disableScanning}>Disable React Scan</button>
       ...
   )
}

But given the comment about react-scan needing to be imported before react, it seems like that won't be possible. Is that accurate?