This is more a architetural solution, where i had to think in a way to add custom helmets to a site. A Helmet Need a Script tag and some config values, usually set on the enviroment.

The solution consists of two React High Order Component (HOC) that work together, the first basically serves to create a Context Provider, using React's ContextAPI, which searches for the necessary information in the application's environment variables and standardizes them to be used by the second HOC, a function that encapsulates two components together, the first is received as a parameter and the second is the Helmet component, which has the atomic Helmets of each vendor.

In this scenario, the order of execution is important because, for the Helmets to be instantiated correctly, the Provider must have already loaded all the necessary variables, so I used the lodash function flowRightto create a new composite function, which generates a new function component, the final HOC created.

The usage is quite simple, you just need to wrap the Layout with the HOC, like this:

...
const Layout = withPageModifiers((...) => {...})
...

export default Layout