React was not bothered at all. From the start there were ways to escape React model in components and integrate components into other frameworks. Been there, done that, it was never a huge deal.
But I am an American, so I won’t put up with any inconvenience and don’t consider it virtuous to do so (we fought a war over a tea tax after all).
But I’ll take a wild guess:
A bunch of useRefs? I’m excited to hear all of this.
import { useEffect, useRef } from 'react';
import { Controller } from 'some-animation-library';
const SomeWrapperComponent = ({ options }) => {
const elementRef = useRef(null)
const controllerRef = useRef(null)
useEffect(() => {
if (!elementRef.current) {
return () => {}
}
if (!controllerRef.current) {
controllerRef.current = new Controller(elementRef.current, options)
} else {
controllerRef.current.setOptions(options)
}
return () => {
controllerRef.current.doSomeCleanup()
}
}, [options])
return <div ref={elementRef}></div>
}I’ve been using React for quite some time (started with version 0.11 or something) and had to integrate quite a few libraries on my own (stuff like OpenLayers for maps, etc) and it also worked pretty well. Also made few apps that had only few widgets (search UI, calendar, etc). It usually worked quite well.
Mixing React with non React is quite easy. You only need to encapsulate it - keep all non vdom stuff in one component and never escape single DOM node.