[SOLVED] Refreshing child component on webfont load callback from index.js

Refreshing child component on webfont load callback from index.js

Problem:

Different font needs a little bit different styling on an element that contains this font. Style of this component is calculated in JS. When webfont loads font and changes it in a DOM, my component is not being refreshed. I want to use Webfontloader callback to force this component to reload. Webfont config is specified on the top layer - index.js (which is above App.js):

// webfontloader configuration object. *REQUIRED*.
const config = {
  google: {
    families: ['Roboto:500']
  },
  custom: {
    families: ["Reef", "Roboto Slab"],
    urls: fonts
  }
};

const callback = status => {
  console.log(status);
};

ReactDOM.render( 
<BrowserRouter >
  <WebfontLoader config = {config}
  onStatus = {callback} >
    <App / >
  </WebfontLoader>  
</BrowserRouter >,
  document.getElementById("root")
);

How can I refresh that element in elegant way (without passing props too deep, trough all parent elements)?

Thanks!

Solution

As @Hinrich mentioned, the solution was Context API. On webfont load I'm updating App state and passing it trough Provider to all Consumers so that forces component (consumer) re-render.