Implementing Multilingual title for a webpage using typescript

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.

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.

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.

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.

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!

Twitter : @SharanyaVaidya