Creating constant resource file for making multilingual app in ReactJS

Few days back a student asked me about creating a separate file to keep dropdown values. This made me think of all the other developers and students who might be wondering about the same problem. These files are called resource files and they are useful to write clean code. Today we will learn how to create constant resource files for making multilingual app in reactjs.

Introduction

Resource files are used for various purpose –

1. To keep the Strings of the application in it. This helps in changing them and transform them to multiple languages.
2. Reusing the frequently appearing text without writing them multiple times. This leads to the space savings.
3. All the dropdown options of the application can be placed in a single file.

Constant Resource File

To define a resource file, create a JavaScript file. Let’s name it resource.js.

export const resources = {
  INPUT_PLACEHOLDER_NAME : "Write Your Name Here",
  INPUT_PLACEHOLDER_AGE  : "Write Your Age in Years",
}

This is an object resources, where we defined strings for input placeholder. Similarly you can define strings for whole application.

You can also group different sets of strings like login strings, contact form strings, home page strings etc. into different objects so that they won’t get cluttered. Something like this –

export const resources = {
  LOGIN : {
            HEADING_LOGIN : "Login",
            INPUT_PLACEHOLDER_EMAIL : "Write Your Email Here",
            INPUT_PLACEHOLDER_PASS  : "Write Your Password",
          },

  CONTACT : {
            HEADING_CONTACT : "Contact Us",
            INPUT_PLACEHOLDER_EMAIL : "Write Your Email Here",
            INPUT_PLACEHOLDER_NAME  : "Write Your Name",
            INPUT_PLACEHOLDER_MESSAGE : "Write Your Message",
          },
  HOME : {
            HEADING_WELCOME : "Welcome ",
            MESSAGE  : "This is the demo of string resources.",
          },
}

Now to use this file in your application, import it. For example, we want to use it in src/login.js file –

import React from 'react'
import {resources} from '../resource'

const Login = () => {
  return (
    <div>
       <h2>{resources.LOGIN.HEADING_LOGIN}</h2>
       <form>
         <input type="email" placeholder={resources.LOGIN.INPUT_PLACEHOLDER_EMAIL} />
        <input type="password" placeholder={resources.LOGIN.INPUT_PLACEHOLDER_PASS} />
        <input type={'submit'} />
       </form>
    </div>
  )
}

export default Login;

Take note of the folder structure. Our resource file is outside the src folder and that’s why we used '../resource' –

One of the benefit of using resource file is that the IDEs will automatically show you the list of strings to choose in your code.

Suppose you want to compare two strings in switch or if/elseif then it is error prone to write them. But defining them in resource file will let IDE to safely let you write correctly and warn you for mistakes at compile time. Check this image –

Adding Multilingual Support

To add multilingual support to the application, we need to either create multiple resource files for different languages or define different objects within same resource file.

You can use 2 letter language representation while naming files. For example, en is for English and hi for Hindi. So you can name your files – resource_en.js and resource_hi.js. With this approach, you need to import the appropriate file for the user.

In second approach you can put strings of all the languages in a single resource file and choose appropriate string. Check this –

export const resources = {
  en : {
    LOGIN : {
            HEADING_LOGIN : "Login",
            INPUT_PLACEHOLDER_EMAIL : "Write Your Email Here",
            INPUT_PLACEHOLDER_PASS  : "Write Your Password",
          },

    CONTACT : {
            HEADING_CONTACT : "Contact Us",
            INPUT_PLACEHOLDER_EMAIL : "Write Your Email Here",
            INPUT_PLACEHOLDER_NAME  : "Write Your Name",
            INPUT_PLACEHOLDER_MESSAGE : "Write Your Message",
          },
    HOME : {
            HEADING_WELCOME : "Welcome ",
            MESSAGE  : "This is the demo of string resources.",
          },
  }, 
  hi : {
    LOGIN : {
            HEADING_LOGIN : "प्रवेश करें",
            INPUT_PLACEHOLDER_EMAIL : "अपना ईमेल लिखें",
            INPUT_PLACEHOLDER_PASS  : "अपना पासवर्ड लिखें",
          },

    CONTACT : {
            HEADING_CONTACT : "संपर्क करें",
            INPUT_PLACEHOLDER_EMAIL : "अपना ईमेल लिखें",
            INPUT_PLACEHOLDER_NAME  : "अपना नाम लिखें",
            INPUT_PLACEHOLDER_MESSAGE : "विस्तार में बताएं",
          },
    HOME : {
            HEADING_WELCOME : "स्वागतम ",
            MESSAGE  : "यह स्ट्रिंग संसाधनों का डेमो है|",
          },
  }
}

Now for English you can use resources.en and for Hindi you can use resources.hi. Check the code for login.js –

import React from 'react'
import {resources} from '../resource'

const Login = (props) => {

  const _resources = resources[props.language]

  return (
    <div>
       <h2>{_resources.LOGIN.HEADING_LOGIN}</h2>
       <form>
         <input type="email" placeholder={_resources.LOGIN.INPUT_PLACEHOLDER_EMAIL} /><br />
        <input type="password" placeholder={_resources.LOGIN.INPUT_PLACEHOLDER_PASS} /><br />
        <input type={'submit'} />
       </form>
    </div>
  )
}

export default Login;

Login component will receive a prop language and select the appropriate resource. Suppose you are calling login from App.js where you have given an option to select language. Check this App.js code –

import React from 'react'
import Login from './login'

export default function App(){
  const [language, setLanguage] = React.useState('en')
  
  return (
    <div>
       <div style={{overflow: 'hidden'}}>
         <select 
            onChange={e => setLanguage(e.target.value)}
            style={{float: 'right'}}
         >
            <option value="en">English</option>
            <option value="hi">हिंदी</option>
         </select>
       </div>

       <Login language={language} />
    </div>
  )
}

In this code we defined a state variable language which will hold the value of language selected by user. We have provided two options to choose from – English and Hindi.

This variable is passed to the <Login> component so that the form will be rendered accordingly. Check the below image to see how the login form will look like in both languages –

You can see that the Submit text on the button is same in both languages. This is because we have not defined any value for it in resource file. So the browsers are taking the default value defined by W3C. You can show the text of your choice on this button.

    Tweet this to help others

Live Demo

Disclaimer: This live demo has login form but authentication do not work in this way. This demo is for showing resource file usage and not login functionality.