Detect React with JavaScript

Question

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.)

• How to tell if a web application is using ReactJs
• How can I detect if a website is built with React?

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

EDIT: I need to be able to detect React as soon as React is loaded in the browser, before React even renders/hydrates the page. So far, all answers below are detecting React too late.

Answer 1

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