set react context provider state programatically from outside the tree

Question

I'm adding React to an existing webapp. For now, I'm selectively replacing parts of the page, rendering different components in different divs. For this reason I don't have a single tree from where all components hang. I would like to use one context provider to share context information across all these components, but since I don't have a single tree I can't make them all hang from the same context provider.

Is there a way to use the default context defined like this?

const MyContext = React.createContext(some_data);

and to have NO provider from which components hang, rather only consumers?

<MyContext.Consumer>...</MyContext.Consumer>

It works for the default value, but then I don't know how to change the value of this default context.

Is my understanding correct and this is meant for all consumers hanging from a provider? or is there a way to programatically set the value of the default context? Is there another way to approch this?

Answer 1

React context totally relies on component hierarchy, it cannot be used to provide common context for unrelated React widgets.

If the page consists of multiple React widgets, they need to have a common parent. This can be done with portals, this way the whole page doesn't need to be converted to React component.

Here's an example:

<div id="App"></div>
<h2>Foo widget</h2>
<div id="FooWidget"></div>
<h2>Bar widget</h2>
<div id="BarWidget"></div>

---

class App extends Component {
  render() {
    return <FoobarContext.Provider value={{foo: 'foo', bar: 'bar'}}>    
      {ReactDOM.createPortal(<FooWidget />, document.getElementById('FooWidget'))} 
      {ReactDOM.createPortal(<BarWidget />, document.getElementById('BarWidget'))} 
    </FoobarContext.Provider>;
  }
}

const FooWidget = props => <FoobarContext.Consumer>
  {({ foo }) => foo}
</FoobarContext.Consumer>;

...

ReactDOM.render(<App />, document.getElementById('App'));

Answer 2

You may want to look into portals. This lets you target specific elements to render your React tree into. You can have a single component tree, with a declared context in your example, and hang all your components off of that independent of how it's being rendered into the DOM.

This article, under "legacy applications" gives you a good idea of how to do what I'm talking about.