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