feat: allow browser language detection

[isaacknjama]

Resolves #350

This PR allows i18next to detect the language set in the user's browser and translate the page.

Translation happens seamlessly now.

[wbobeirne]

Ah I just realized that #350 isn't about spanish not activating, it's about some translations missing in spanish. This is currently a manual process, so not all of the keys in english have spanish counterparts. It falls back to english, so you see english in those cases. This is not a configuration issue.

[isaacknjama]

Ah I just realized that #350 isn't about spanish not activating, it's about some translations missing in spanish. This is currently a manual process, so not all of the keys in english have spanish counterparts. It falls back to english, so you see english in those cases. This is not a configuration issue.

While working on this, I noticed translation doesn't happen automatically with the browser language setting - this is on Chrome(Brave, Chromium). Modifying the i18NextLng key in localStorage manually causes the page to get translated to the value set. Hence, the addition of the detection config to update this key according to browser language setting.

[wbobeirne]

Based on what I'm seeing in the README for that project, it will use the navigator but only after checking the other sources. It looks like it saves a LS key based on the initial detected language from navigator, then uses that going forward. So if you change your browser language settings, it will still use the old one based on the key that was saved.

I think it would be wise to retain this behavior in the future, if we want to add a language selector. Perhaps you should just empty out the caches: [] option instead, to not save it to the cache, but to keep the configuration to check for a LS key: https://github.com/i18next/i18next-browser-languageDetector/blob/9efebe6ca0271c3797bc09b84babf1ba2d9b4dbb/src/index.js#L20

[isaacknjama]

Based on what I'm seeing in the README for that project, it will use the navigator but only after checking the other sources. It looks like it saves a LS key based on the initial detected language from navigator, then uses that going forward. So if you change your browser language settings, it will still use the old one based on the key that was saved.

I think it would be wise to retain this behavior in the future, if we want to add a language selector. Perhaps you should just empty out the caches: [] option instead, to not save it to the cache, but to keep the configuration to check for a LS key: https://github.com/i18next/i18next-browser-languageDetector/blob/9efebe6ca0271c3797bc09b84babf1ba2d9b4dbb/src/index.js#L20

This makes sense, took me a while to get the logic! Thanks for pointing this out.