Implementing Multilingual title for a webpage using typescript
Published: 2020-05-21 15:25:06

#typescript, #react, #beginners, #tutorial

The `title` of your webpage is the entry point of your site. So it's the best practice to have a relevant title which gives the concise picture of the webpage content. 

I was just trying my hands on a webpage that needs a title which keeps changing after a certain duration. So the webpage was for food delivery in my city which would cater SouthIndian food. So the requirement was to have the title of the webpage being displayed in different languages. (General Trivia : We have four different languages in SouthIndia - Kannada, Tamil, Telugu and Malayalam spoken by people of four different states apart from English) 

The title tag is placed between the opening and closing `<head>` tags in the HTML file.
Now in our `app.tsx` file we define an object which contains the key value pairs of the languages in which we want the title displayed.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2lca8b42w45l5r4646us.png)

We create reuseable aliases for a valid typescript type. `LanguagesType` specifies that it is of type string and use of *typeof Languages* to indicate the type of the unevaluated operand.
The `type LanguageType` specifies the key of the object `Languages` and `keyof` helps us to avoid manually defining all the keys and lets TypeScript provide the keys.This helps in avoiding updation of these types once they change.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o05c5kx5925ic6bfhpi1.png)
The array interface defines the kind of the key the `LanguageType` array uses and the type of entry it contains.
The `Object.keys(LANGUAGES)` method returns the string properties and methods of an object.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/im2bie0qmtfkfxmh5tbr.png)
`LANGUAGES_TEXT` is an object that specifies the scripts of all the LanguageType defined. We will later pick only the keys of this object and run it on loop to be displayed as the title.

As you're familiar with the React class lifecycle methods, you can think of `React.useEffect()` Hook as *componentDidMount, componentDidUpdate, and componentWillUnmount* combined. As you see in the code the argument of `useEffect()` is a function that handles your actions when something affects your component. In this case the DOM is updates to match our latest render output. React first updates the DOM, then calls the function `intervalID()` passed to `useEffect()`.
The `clearInterval()` function clears the interval which has been set by `setInterval()` function before that. `setInterval()` function takes two parameters. First a function to be executed, which is assigning the `LANGUAGES_TEXT` array to the title of the document and second after how much time (in ms) should the change occur. `setInterval()` executes the passed function for the given time interval.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/81loh6xnbbdo90jkgbpq.png)

Finally, once you save your file and run it should work as expected. Our webpage title will change after every 2 seconds. 

If you have any difficulties, questions or contributions as regards this topic, please let me know in the comment section and also follow me on twitter for more such fun. 
HappyCoding!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j68ofiw6htvrbidy4cn4.png)
Twitter : [@SharanyaVaidya](https://twitter.com/sharanyavaidya?lang=en)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bv3neb2djpuauhh15gz7.png)