Detect React with JavaScript

user_270274 0
Viewed 238

As a library author, I'd like to know whether my library is being used with React or with some other UI framework (Vue, Svelte, ...).

Is there a way to detect whether React's code was loaded?

The following Stack Overflow answers don't answer this question because they only work using the developer console. (Whereas I want to detect React from the perspective of a JavaScript library.)

Context: I'm building vite-plugin-ssr. (It's like Next.js/Nuxt but as a do-one-thing-do-it-well Vite plugin.)

reactjs javascript
3 Answers

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'))
user_12686520

Once in some library (sorry I don't remember the name, but it might have been NX) I've seen this clever way of detecting framework it's being used with. (Basically you just try to import library and check if it fails or not)

function isModuleAvailable(moduleName) {
    try {
        require.resolve(moduleName);
        return true;
    } catch (e) {}

    return false;
}

if (isModuleAvailable("react")) {
  //...
}
user_37390870
user_43325330
Related