React 18 introduced a new way to manually render a component, now instead of calling
import ReactDOM from 'react-dom';
ReactDOM.render(component, container)
one must call
import { createRoot } from 'react-dom/client';
createRoot(container).render(component);
Failure to do so results in a warning to the console and reverting back to React 17 API compatibility.
Is there an official or at least a semi-clean way for a component published to NPM to support both APIs?
There is React.version
that I can check.
However createRoot
is in a separate file, this means I am looking at a conditional import that will surely be source of problems with the various bundlers and transpilers.
Any better ideas?
Note: The component in question is https://www.npmjs.com/package/rlayers which includes a virtual component, the map style, with a render()
property, that can be rendered off-screen to compute the map style. Any answer that allows me to call all the nested render()
methods while providing a value for a context is also a valid one.