> ## Documentation Index
> Fetch the complete documentation index at: https://docs.microapp.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Localization

> Display text in the user's preferred language.

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](/core-concepts/localization/react) - For React, Next.js, and similar frameworks
* [TypeScript Localization Guide](/core-concepts/localization/typescript) - 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:

```bash theme={null}
npm install @microapp-io/react
```

### 2. Create a Translations Object

Create a translations object that contains text in different languages:

```javascript theme={null}
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:

```jsx theme={null}
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](/core-concepts/localization/typescript) 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.

<Tip>
  Now that you have a basic understanding of localization for your microapp, we encourage you to explore our comprehensive [Localization documentation](/core-concepts/localization/overview) for more detailed guidance.
</Tip>