CODEWITHSUNDEEP
htmlreactjsmultilingual
Fábio Gonçalves
Fábio Gonçalves

Reputation: 53

change language on main index.html with reactjs

I'm working on a website and i'm trying to make the site multilanguage. on my index.html I have two title, one in english and another in portuguese.

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title > EN </title>
    <title lang = "pt-PT"> PT </title>

  </head>

So in default language is english and I want to change it to portuguese if the language of the browser becomes portuguese. I already changed the browser in poruguese, but the language is still in english

I'm still new on this and I just wanna know if theres some code or something that can help me resolve this code.

Upvotes: 1

Views: 2873

Answers (1)

knada
knada

Reputation: 344

You can use react-helmet, which helps you put content in the <head> by using react code. Put this in your root component.

import { Helmet } from "react-helmet"

const siteLanguage = 'pt-PT'

In your render

 return (
    ...
    <Helmet htmlAttributes={{
        lang: siteLanguage,
        }} 
    ><title lang={siteLanguage}>PT</title>
    </ Helmet>
    ...
    )

Portuguese language code can be 'pt', 'pt-BR' or 'pt-PT'

Upvotes: 3

Related Questions