DEV Community: Dileep Reddy

From Mono to Multilingual: Supercharge Your React App with i18n

Dileep Reddy — Sun, 21 May 2023 14:47:01 +0000

What is i18n?

Imagine you work as a developer at a growing startup, and your manager comes to you and says, "We are going to expand to a new country. In order to interact with local customers, you need to make changes to support their language and local requirements." This process is called internationalization, commonly referred to as i18n because there are 18 letters between "i" and "n" in "internationalization". In this post, we will focus on using the i18next JavaScript package with React.

i18n features

i18n has many use cases, including:

Language support
Date and time format changes (e.g., DD/MM/YYYY, YYYY/MM/DD)
User language detection
Currency representation (placement of currency symbol with digits varies by country), and more.

Installation

To use i18n in React, we need to install two packages:

npm i react-i18next i18next --save

The i18next package is the core package that works with all JavaScript frameworks and apps, while react-i18next is a plugin that makes it easy to use i18next with React.

Make React Multilinugual - Setup

Inside your app's src folder, create a new file called i18n.js (you can choose any name). Set up the file as follows:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {} // We'll fill this later

i18n.use(initReactI18next)
    .init({
      resources,
      lng: 'en', // default language option. en for english
      interpolation: {
        escapeValue: false
      }
    })

export default i18n

In the above code, we import the main i18next package and the initReactI18next class. Then we initialize the i18n class by passing the configuration data.

The resources object is where we store the translations for different languages. The interpolation key is used to prevent cross-site scripting attacks. The escapeValue is set to false because the safety check is enabled in React by default, and we don't want i18n to perform the check again as it may slow down the application.

Next, import this file into src/index.js as follows:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Now you are ready to use it in the Components. Let's create a component called Home.js with the following code.

import React from 'react'
import { useTranslation } from 'react-i18next';

const Home = () => {
  const { t } = useTranslation()

  return (
    <div className='App-header'>
      <p>{t('home_text')}</p>
    </div>
  )
}

export default Home

Our app should look like this now. As we did not add any language resources in i18n.js. The key name will be displayed.

Let's go and update both i18n.js and Home.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = { // language specific data
  en: {
    translation: {
      'home_text': 'This is my home page',
      'ask user': 'How are you?'
    }
  },
  de: {
    translation: {
      'home_text': 'Dies ist meine Homepage'
    }
  }
}

i18n.use(initReactI18next)
    .init({
      resources,
      lng: 'en', // default language option. en for english
      interpolation: {
        escapeValue: false
      }
    })

const Home = () => {
  const { t } = useTranslation()

  return (
    <div className='App-header'>
      <p>{t('home_text')}</p>
      <p>{t('ask user')}</p>
    </div>
  )
}

In the above code, we use the useTranslation hook from react-i18next to access the translation function t(). We can use t('home_text') to retrieve the translated text for the key home_text.

Now our app should look like this

Switch Language

To switch between languages, react-i18next provides an i18n instance with several methods. Let's update Home.js to include language switching:

const Home = () => {
  const { t, i18n } = useTranslation()
  const languages = {
    en: 'English',
    de: 'German'
  }

  return (
    <div className='App-header'>
      <p>{t('home_text')}</p>
      <p>{t('ask user')}</p>
      <div>
        { Object.keys(languages)
                .map((lng) => <button
                                onClick={() => i18n.changeLanguage(lng)}
                                disabled={i18n.resolvedLanguage == lng}
                                key={lng}
                              >
                                {languages[`${lng}`]}
                              </button>
                    )}
      </div>
    </div>
  )
}

With the above code you can switch between languages by using the provided buttons.

But there is a problem, when you switch to german instead of displaying the greeting it'll display the key name like this.

Fallback Language

To handle missing translation keys, we can specify a fallback language. Update the i18n.init call in i18n.js as follows:

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .init({
      resources,
      lng: 'en',
      interpolation: {
        escapeValue: false
      },
      debug: true, // Will display debug options in console
      fallbackLng: 'en' // If any key is missing, it will fallback to english
    })

Language Detection

Providing an option to switch languages is good, but we can do better.
To automatically detect the user's preferred language in the browser, we can use the i18next-browser-languagedetector package. Install the package and update i18n.js as follows:

import LanguageDetector from 'i18next-browser-languagedetector';

const languageOptions = {
  order: ['navigator', 'querystring'], // Define order and way to find user preference
  lookupQuerystring: 'lng' // key name to find the preference
}

i18n.use(initReactI18next)
    .use(LanguageDetector)
    .init({
      resources,
      lng: 'en',
      interpolation: {
        escapeValue: false
      },
      detection: languageOptions,
      debug: true,
      fallbackLng: 'en'
    })

We need to import LanguageDetector from the package and pass it during i18n initialisation.
Also we need to pass options for language detection through detection key.

There are many other options which you can pass for language detection which you can find in the documentation

Conclusion

Thank you for reading this blog post on making a React app multilingual using i18n. We covered the basics of i18n, installation, setup, language switching, fallback language, and language detection. Stay tuned for the next part where we'll explore more features provided by i18next.

If you have any corrections or questions, feel free to leave a comment. Thank you again for reading!

Thumbnail Photo by Amador Loureiro on Unsplash

What is Throttling? How to implement it in JS?

Dileep Reddy — Mon, 14 Nov 2022 17:30:32 +0000

In the previous post we talked about debounce. Click on this link if you'd like to know about debouncing.

Throttling is a method used to limit the number of times a function can be executed.

Throttling - No matter how many times a function is fired, it will be executed only once in a given time interval

Let's say we have an expensive function which does heavy computation or calls a costly 3rd party API.

const expensive = () => {
  console.log('Expensive function');
}

We can limit the number of times the function can be executed by using throttling. Let's write a simple throttle function.

const throttle = (fn, delay) => {
  let wait = false;

  const throttledFunction = () => {
    if (wait) return; // If wait is true, it means the timer
// is still running and the function shouldn't be executed

    fn();
    wait = true;
    setTimeout(() => {
      wait = false;
    }, delay);

  return throttledFunction;
}

const inExpensive = throttle(expensive, 1000);

Our throttle function takes a callback function and delay and returns its throttled counterpart(inExpensive).

But wait, our throttle function cannot handle arguments. Let's improve it a bit so that it can take arguments.

const throttle = (fn, delay) => {
  let wait = false;
  let storedArgs = null;

  const throttledFunction = (...args) => {
    if (wait) {
      storedArgs = args;
      return
    }

    fn(...storedArgs);
    wait = true;
    setTimeout(() => {
      wait = false;
    }, delay);
  }

  return throttledFunction;
}

Thanks for reading!....

https://medium.com/walkme-engineering/debounce-and-throttle-in-real-life-scenarios-1cc7e2e38c68
https://www.freecodecamp.org/news/javascript-debounce-example/
https://egghead.io/lessons/javascript-build-lodash-debounce-from-scratch

Debounce in JS - How and When to use?

Dileep Reddy — Wed, 02 Feb 2022 14:45:06 +0000

Photo by Ellen Qin on Unsplash

As we go through our developer journey...when working on a bug or trying to improve performance of our app we will definitely come across the words debouncing and throttling.

Now we are going to discuss only about debouncing.

So...What is Debouncing ?

Debouncing is a method which prevents a function from executing if it gets called or invoked too frequently.

Let's say we have a Button and on clicking it we call a function which prints Clicked to the console. What if we clicked twice or thrice at once? The message Clicked will be logged as many times as we clicked the button.

But this is not ideal in many cases. Say we have a button for submitting a form for creating a new user. If the button gets clicked multiple times, multiple users might be created in the database with same details. This must be prevented.

In situations like these we can use debouncing.

Coding our debounce method

Now let's create a live demo of the debounce method. Open up the inspect tab and switch to the console.

let likeBtn = document.getElementById('reaction-butt-unicorn')

Paste the above code in the console and click enter. This selects the unicorn icon that you see on the left side of this post and assigns it to the variable likeBtn.

Next we'll create a function called printToConsole and add an onclick event listener to the likeBtn.

function printToConsole() {
  console.log('Unicorn was clicked')
}

likeBtn.onclick = printToConsole

Now click the unicorn icon and see that the message gets logged to the console and the count increases as many times as you click it. Try clicking it twice or thrice instantaneously. Still the message gets logged as many times as you click it.

Let's write a debounce method which will change the way our button behaves.

function debounce(fn, waitTime) {
  let timer;
  return function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn(), waitTime);
  }
}

likeBtn.onclick = debounce(printToConsole, 300)

Now let's see how the button behaves. Try clicking the icon multiple times at once. What do you see?.....

The message is logged only once after a delay of 300ms even though the icon was clicked multiple times.

Even though the button was clicked multiple times at once, we see that it gets logged only once after we stop clicking it.

The reason for this is that a new timer is created every time we click the button and our function will run when the timer reaches the waitTime. If the button gets clicked when a timer is running, the previous timer will be destroyed and a new timer will be created.

You should've gotten the idea of why and how to use debouncing.

But the function we wrote doesn't take any arguments. If we want to pass arguments to our function, the method should be written in this way.

function debounce(fn, waitTime) {
  let timer;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn(...args), waitTime);
  }
}

This is only one version of debounce implementation. If you want to look at other implementations you can checkout some well known libraries which have their own implementation.

Like....

lodash, jQuery

That's all for debounce in the next post we'll talk about throttling.

Please leave a comment if you find anything that can be improved or corrected.

Thank you!!!!

Vue.js - Get up and Running

Dileep Reddy — Fri, 21 Jan 2022 18:54:16 +0000

Photo by Mohammad Rahmani on Unsplash

Who is this for?

For developers who are already familiar with frameworks like React, Angular, etc. and want to learn minimum amount of Vue.js features to get their engines running.

I want to give a quick intro of what we need to know if we intend work on a project built with Vue.js. We are gonna start with the important one...the component structure.

Component Structure

The component structure in Vue is pretty straight forward.
We can divide it into 3 sections.

The HTML or (template)
The JavaScript or (script)
The CSS or (style)

<template>
  <!-- html goes here -->
</template>

<script>
// import other components or libraries using js import
export default {
  data () {
    return {
// define state here
    }
  },
  methods: {
// define functions here
  }
}
</script>

<style>
/* define styles here */
</style>

Component State

In the above code block inside script tags, there is a comment saying define state here. It's just that simple.

<script>
export default {
  data () {
    return {
      name: 'Jane',
      age: 32,
      books: ['the dip', 'Norwegian wood'],
      person: {name: 'Jan', gender: 'female'}
    }
  }
}
</script>

To access the state variables inside the script tags you need to use it as this.name. Here the this keyword refers to the instance which holds the data.

But to access it inside template tags. You can use the mustache syntax. It goes like this.

<template>
  <div>
   <p>{{name}}</p>
   <p>{{age + 10}}</p>
   <p>{{person.gender}} {{books[0]}}</p>
  </div>
</template>

We can perform all JS actions inside the braces including function calls. But it isn't preferred unless necessary.

If you want to change value of state variable. You can do this

this.name = 'New name'

inside any function.

Template syntax using `v-` directives

Vue uses something called directives which allow us to link JS in script tags with our HTML. So that you can perform JS operations inside the template.
Let's talk about the directives that i found useful and used regularly.

1. `v-if, v-else-if, v-else` -

As the name suggests these provide a way to conditionally render required HTML.

<div>
  <p v-if="showIf">Will be rendered if showIf is true</p>
  <p v-else-if="showElsIf">Will be rendered if showElsIf is true</p>
  <p v-else>Will be rendered if above two are false</p>
</div>

2. `v-show` -

This is similar to the v-if. The difference is v-if doesn't render to the DOM if the applied condition fails. Whereas v-show renders the element to the DOM initially and then hides the element using css display properties if the condition fails.

As we are talking about DOM. I would like to mention that Vue also uses Virtual DOM. You can read more about it in this blog.

<div>
  <p v-show="age === 20">Show Me</p>
</div>

3. `v-bind` -

I find this to be the most used directive. As the name suggests this is used to bind something, and here that something refers to binding HTML attributes with JS attributes.
Let's see how it works.

<div>
  <button v-bind:disabled="isDisabled">Button</button>
  <div v-bind:class="selected && 'text-blue-500'">
    Blue text
  </div>
</div>

This will disable the button if isDisabled = true
The Blue text will be blue if selected = true. The class name used is a tailwind class.

Instead of typing the whole v-bind:disabled we can write it as :disabled. Both are equal. This is called the v-bind shorthand

v-bind is also used to pass props to a child component.

<div>
  <child :property="newProperty"></child>
</div>

newProperty is a variable defined in parent component that is being passed down to child component as property.

4. `v-on` -

The v-on directive is used to add event listeners like onClick, onHover, onFocus, etc. to an element.

<div>
  <button v-on:click="buttonClicked()">Click me!</button>
  <button @click="buttonClicked()">Click me!</button>
</div>

Here buttonClicked() is a function that gets called when we click the button.
The first and second lines both work the same way. v-on:click is same as @click
The second one(@click) is called v-on shorthand similar to the v-bind shorthand.

5. `v-for` -

Used to loop through an array and render elements dynamically.

<div v-for="item in list">
  <p :key="item">{{item}}</p>
</div>

list = ['item1', 'item2', 'item3']

Don't forget to add the :key to differentiate the elements.

6.`v-html` -

To render real HTML in the template. Say we have a state variable called newHtml.
newHtml = "<span>Hello Vue!</span>"
This can be used in the template as,

<template>
  <div v-html="newHtml"></div>
  <div>{{newHtml}}</div>
</template>

The rendered HTML in browser will be

Hello Vue!
<span>Hello Vue!</span>

7. `v-model` -

v-model is used to add two way data binding. This is useful to update the value passed to the input or textarea elements as we type. Let's see an example.

<div>
  <input v-model="message">
  <p>{{message}}</p>
<div>

The magic of v-model is that it automatically updates the value of message as you enter text in the input box.

This blog will give you a better understanding of how v-model works.

Defining functions

We should define functions in the methods function inside script tag. There are also other ways but they don't fall in the current scope of our discussion.

export default {
  methods:{
    greet(){
      console.log('Greeting')
    },
    onClick(){
      console.log('Button Clicked')
    }
  }
}

Receive props

We previously saw how to pass props through v-binding. Now let's see how to receive them in the child.
When props are passed down to the child component we have two ways of receiving them.

PARENT: 
<div>
 <child :name="'Jan'" :age="24"></child>
<div>

CHILD:
1st way ->
export default {
  props: ['name', 'age']
  methods:{
  }
}
2nd way ->
export default {
  props: {
    name: String,
    age: Number
  }
  methods:{
  }
}

In the second way we define the types of props that we are going to receive. This will help us a lot to identify any errors that might be caused due to unexpected prop value.

This has been a long post I Know!!!.

Lets end with the final thing "styling".

Adding Styles

Styles are defined inside the style tags. It works same as normal CSS.

<template>
  <div class="summary">name</div>
  <p id="id-name">TEXT</p>
</template>
<style scoped>
  .summary {
    font-size: 14px;
  }
  #id-name {
    color: blue
  }
</style>

Here we need to add scoped so that the styles we added will be applied only to the current component. If we remove it, the styles will be applied globally to all components.

Conclusion

The things we covered will help you in understanding the flow of a project built with Vue. This is by no means full coverage of all the features.
There are many important topics that we should know to be a better Vue developer.
Topics like -

Computed properties

Getters and Setters

Watchers

Mixins

Vuex

Life cycle methods

The official documentation will help you the most in understanding all the concepts.

Please leave comments to add any suggestion or if you find any mistake. Thanks!!

Resources to Learn

Thanks for reading this far. This is my first post on Dev.to.
All the best in your learning journey.

You can reach out to me on linkedin.