Is there a way to communicate with two tabs?

[mmasdivins]

I would like to know if there is a way we can pass data from one tab to another in a bidirectional way. Something similar to EventHub that https://golden-layout.com/tutorials/getting-started-react.html had.

[LoganDark]

You can expose a React context around the Layout component and then use that context for communication. You can use the config of the tabs to tell the components what to do, ~~all components get a tab prop that is the TabNode the component is inside~~ your component factory gets passed a tab argument that you can then pass to the component as needed.

What exactly are you trying to accomplish? There is more than one way to do this

[mmasdivins]

Thanks, right now I did a global event hub where the tabs subscribe and unsubscribe, but I will try your solution.

What I was trying to accomplish is that I have a grid where I can select one row and open it's data on a new tab, then edit the data of the row on the new tab and save the changes. When the changes are saved I wanted to notify the tab where the grid is so it can refresh.

[varnguyen]

Hi,

Can you send some specific examples?

Please

[greggman]

The react context docs cover this pretty well

https://reactjs.org/docs/context.html

at the base you do something like

<MyContext.Provider value={{ various things }}>
    <FlexLayout.Layout ... />
</MyContext.Provider>

inside any component in a Tab you can

function SomeComponent() {
   const {various things} = useContext(MyContext);
   ...
}

You can pass down state and functions

const MyContext = React.createContext();

function App() {
  const [count, setCount] = useState(0);

  return (
  <MyContext.Provider value={{count, setCount}}>
    <FlexLayout.Layout ... />
  </MyContext.Provider>
  );
}

function SomeComponent() {
   const {count, setCount} = useContext(MyContext);
   return (
      <button onClick={() => setCount(count + 1)}>
         click to inc, current count: {count}
      </button>
   );
}

Now if they're are 2 or more SomeComponents in different tabs they'll all be using the same count and if any of them get clicked they'll increment the same state and all update.

https://codesandbox.io/s/flexlayout-context-to-communicate-4k09wb?file=/src/index.js

That's the simplest example but in my app, the "value" I pass in my context has 15 or so functions that things in the tabs can call to set state in the app.