It has been a while since I've looked building react apps/bundling, but note that Hype does have a hook to change resource URLs at runtime, if that helps.
Basic usage (global):
<script>
function myCallback(hypeDocument, element, event) {
var newURL = event.url; // do modifications
return newURL;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback":myCallback});
</script>
That said, Hype uses relative paths to a .hyperesources folder, so you could always just stick the whole Hype project somewhere on the server outside of the react files and access that via a full URL in an iframe. Then you would need to change nothing.
As far as dynamic resizing of an iframe inside React, I can only say that I have not heard of any issues of this. I'm assuming they are using a specific size or 100%/100% width/height to fit the container.
I highly recommend trying an iframe approach ahead of hacking Hype's runtime.
Removal is the problem. Note also that Hype only builds its DOM once on its initial load. So a hack would probably involve copying the main container DOM tree outside of the react page and then move it back in (or get Hype to do the full rebuild).
As an elaboration, Hype's animations are not based on elements but on timelines. Hype keeps track of active timelines which then direct elements on what to do.
If you don't care about state, the easiest approach may be to jump to an empty scene in the document. If you don't use persistent symbols or flexible layout, this will probably remove nearly all timers/listeners.