Has anybody used Marzipano 360 Panorama Viewer in conjunction with a ReactJS app?
Does anyone have any ideas on how one could do so?
One thought I had was to possibly pass Marzipano the React virtual dom's ref to the original DOM element, however I think Marzipano would likely add and remove additional DOM elements within that element, so I think this could conflict with React's management of the DOM and cause problems.
The other idea was to render Marzipano in an element outside the root ReactDOM element, then use regular old document.getElementById to access it, and use CSS to overlay the Marzipano element above the React app when the panorama needs to be visible.
Both are hacky and far from ideal, so if anyone has any better ideas please post.
(Note this is for a personal side-project, so more hacky ideas are totally okay)
It's possible, although somewhat clunky, to use React together with libraries that manipulate the DOM directly. Your first idea is on the right track, as Integrating with other libraries explains for integrating with JQuery:
[L]et’s sketch out a wrapper for a generic jQuery plugin.
We will attach a ref to the root DOM element. Inside componentDidMount, we will get a reference to it so we can pass it to the jQuery plugin.
To prevent React from touching the DOM after mounting, we will return an empty from the render() method. The element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
class SomePlugin extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.somePlugin();
}
componentWillUnmount() {
this.$el.somePlugin('destroy');
}
render() {
return <div ref={el => this.el = el} />;
}
}