Detect React with JavaScript

I've come up with the following solution:

const isReactApp = !!Array.from(document.body.querySelectorAll("*")).find((node) => node._reactRootContainer)

It works on create-react-app as well as gatsby projects (possible more as I've tested only those so far).

Basically it traverses through all elements and check if the magic reactRootContainer attribute is defined on the element. Consider that the snippet could be very slow on huge pages with lots of DOM nodes.

However, I would generally advise against using this approach as it's likely that the reactRootContainer property will change (since it's private) in the near future.

A better approach would be to let the developers who'll use your library tell your library that they are using react (or vue or svelte or x).

Something like:

import MyLibrary from '@mylibrary/react';

EDIT: Another approach I've found which could work for most react projects as long as they attach any event handler:

// find the reactEvents${....} variable in the document.
!!Object.keys(document).find(key => key.includes('react'))

This worked for me. Instead of detecting react on the runtime, you can detect it on the build time.

let react: any;
try {
  react = require("react");
  console.log("react detected");
} catch (err) {
  console.log("no react detected");
}

Then your hook on the runtime just throws an error when there is no react.

export function useMyHook() {
  if (!react) throw new Error("react is undefined");
  const [state, setter] = react.useState();
}

You can detect if an application is using React using this way:

const isUsingReact = window.__REACT_DEVTOOLS_GLOBAL_HOOK__ 
  && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0

This is the way used by the official extension, so I think it's reliable.

https://github.com/facebook/react/blob/d483463bc86555decb3e8caa18459d1d0f7c0148/packages/react-devtools-extensions/src/main.js#L57

The closest i could come up to automatically getting the info (based on How to tell if a web application is using ReactJs) without continuously scanning the whole DOM is to use a MutationObserver to detect changes in the DOM and check for _reactRootContainer on the mutated element.

function onReactLoad(callback) {
  const observer = new MutationObserver((mutationList) => {
    const hasReact =
      const hasReact = mutationList.some(({
        target
      }) => target._reactRootContainer !== undefined);
      
    if (hasReact) {
      callback();
      observer.disconnect();
    }
  });

  observer.observe(document.body, {
    subtree: true,
    childList: true
  });
}

// usage
onReactLoad(() => {
  console.log('react detected')
});