React.macro NPM

babel plugin/macro for react globals

react plugin and macro that lets you write the React APIs as if they were all globals

This:

/*eslint no-undef: 0 */
import { macro } from 'react.macro'; //optional if not using babel macro
macro(); //optional if not using babel macro

export default function Timer() {
  const [state, setState] = useState(0);
  const myRef = React.useRef(0);
  return <Suspense>{state}</Suspense>;
}

Translates to:

/*eslint no-undef: 0 react/jsx-no-undef: 0*/
import React from 'react'; // added if absent, not duplicated if present
export default function Timer() {
  const [state, setState] = React.useState(0);
  const myRef = React.useRef(0);
  return <React.Suspense>{state}</React.Suspense>;
}

Turning off the ESLint no undef warning is helpful for this

Creation videos: