Configure Localization

Our microapp is looking great. But it’s optimized for English users. Let’s make it so that the text appears in the user’s preferred language. This will enable more people to use our microapp.

Microapp currently supports the following languages:

• English
• Spanish
• Portuguese (Brazilian)

​

Implementing Localization

To implement localization in your microapp, you can follow our localization guides based on your framework of choice:

• React Localization Guide - For React, Next.js, and similar frameworks
• TypeScript Localization Guide - For other frameworks or vanilla JavaScript/TypeScript

Below is a general example of how you might implement localization in a React-based application:

​

1. Install the Microapp SDK

First, install the Microapp SDK for your framework:

npm install @microapp-io/react

​

2. Create a Translations Object

Create a translations object that contains text in different languages:

const translations = {
  en: {
    title: "My Application",
    button: "Click Me",
    greeting: "Hello, World!"
  },
  es: {
    title: "Mi Aplicación",
    button: "Haz Clic",
    greeting: "¡Hola, Mundo!"
  },
  pt: {
    title: "Minha Aplicação",
    button: "Clique Aqui",
    greeting: "Olá, Mundo!"
  }
};

​

3. Use the Translations in Your UI

For React applications, you can use the useLang hook to access the user’s language preference:

import { useLang } from "@microapp-io/react";

function MyComponent() {
  const lang = useLang();
  
  return (
    <div>
      <h1>{translations[lang].title}</h1>
      <button>{translations[lang].button}</button>
      <p>{translations[lang].greeting}</p>
    </div>
  );
}

For other frameworks, refer to our TypeScript Localization Guide for implementation details.

​

Testing Localization

To test your localization implementation, you can:

1. Use browser developer tools to change your language settings
2. Use the Microapp testing tools to simulate different language preferences
3. Test your application with users who speak different languages

Great work! Your microapp is now localized. Next, let’s distribute it.