I want React components inside and outside an iframe to access the same state.
As an example i want a Panel to adjust the state outside the iframe that immediately rerenders the react component inside the iframe. Vice versa, I want changes to the component inside the iframe to propagate to the settings panel outside the iframe.
What are my options?
(The purpose is to build a way to preview how a component behaves responsively and iframe seems to be the most reliable option?)
I think that simple application state managing like MOBX will be a good solution for you.
you should keep the share variables which you want to change as an observable, and the components will observe it, like this any change will trig a rerender. also, the components will be able to change this variable as well it as well.
guideline for the process- if I understand correctly your idea, you want to change the width or height or any other property of a component from the panel and it will change the component size in your awesome playground? so, in the mobx 'way' The hight and width will be saved in the 'store' as an observable and the panel and the playground will observe it, and also will be able to call an action to change in the store
don't use Iframe this will work for you. 'your component' should be an external component that its style depends on its props.
if you would like also to drive data from the component to the panel Mobx will be the best fit for you.
