DevTools interop

https://stackoverflow.com/questions/67572469/react-devtools-how-to-append-component-filters-programmatically/67573303

by Valentin Sarychev

HTML

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root" />

Babel + JSX

const rootElement = document.getElementById("root");

const HideMe = (props) => <div>{props.children}</div>;

ReactDOM.render(
	<div>
	  <HideMe>
	    <span>
	      foobar
	    </span>
	  </HideMe>
	</div>,
	document.getElementById("root")
);

if (__REACT_DEVTOOLS_GLOBAL_HOOK__) {
  const handleReactDevtools = (agent) => {
    __REACT_DEVTOOLS_COMPONENT_FILTERS__.push({
      type: 2,
      isEnabled: true,
      isValid: true,
      value: "HideMe"
    }, );
    agent.updateComponentFilters(__REACT_DEVTOOLS_COMPONENT_FILTERS__);
  };
  if (__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
    handleReactDevtools(__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent);
  } else {
    __REACT_DEVTOOLS_GLOBAL_HOOK__.on("react-devtools", handleReactDevtools);
  }
}