search

microapps / gatsby-plugin-react-i18next

Easily translate your Gatsby website into multiple languages
MIT License
121 stars 72 forks source link

Leverage wrapRootElement instead of wrapPageElement #86

Open brandon-pereira opened 3 years ago

brandon-pereira commented 3 years ago

Currently this plugin is leveraging wrapPageElement to provide its context to the application, however wrapRootElement might be a better place to bind to.

According to the gatsby documentation, it says this about wrapRootElement (https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement): "This is useful to set up any Provider components that will wrap your application. For setting persistent UI elements around pages use wrapPageElement.".

Since this component is setting up a context instance (here: https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/src/plugin/wrapPageElement.tsx#L139) it might be better to make this wrap root.

Our specific use case is we're doing server side rendering of different languages, and we need to access the context from our gatsby html.js file (https://www.gatsbyjs.com/docs/custom-html/) but as this is outside of the context of page element, we're unable to access the current language during first server render.

I can make this change if you'd like. I am a bit hesitant to open a PR right off the bat because this might involve some discussions. Let me know how I can help :)

Thanks!

hgeorgilas commented 3 years ago

@brandon-pereira Did you find any solution to this problem? I'm stuck at exactly the same problem. Thanks