# Internationalization Configuration

## Usage

To manage the code and value of each multilingual option, log in to the [Tuya MiniApp Developer Platform](https://iot.tuya.com/miniapp/), select the target miniapp, and then go to **Multilingual**.

<Image
  src='/images/extended/extended-i18n.en-US.png'
  style={{
    borderRadius: '10px',
    width: '618px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## Application of Internationalization

Using the `I18n.t` function method, internationalization fields can be applied to global configuration and `React` code. The methods are as follows:

### 1. Global and Page Configuration

You can use internationalization variables in `global.config.ts` or `index.config.ts` configuration files.

Note: '@I18n.t('xxx')' must be written in single quotes,

> @ray-js/cli@1.7.63 after version will support `'@i18n.t("xxx")'` double quotation marks format.

```tsx
// global.config.ts
import { GlobalConfig } from '@ray-js/types'

export const tuya = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: '@I18n.t("miniprogram")',
    navigationBarBackgroundColor: '#ff592a',
  },
}

const globalConfig: GlobalConfig = {
  basename: '',
}

export default globalConfig

// index.config.ts
export default {
  navigationBarTitleText: '@I18n.t("miniprogram")',
}
```

### 2. Use in React Code

```tsx
import React from 'react'

import { View } from '@ray-js/ray'

export default function Demo() {
  return (
    <View
      style={{
        backgroundColor: 'orange',
        padding: '20rpx',
      }}
    >
      {I18n.t('projectName')}
    </View>
  )
}
```

## Panel Multilingual

Panel MiniApp multilingual is an additional logic for obtaining product multilingual, which is used to meet the needs of different products using the same panel MiniApp.

## Multilingual Panel

Internationalization is essential for developing panel miniapps. The multilingual module of a panel miniapp allows for requesting the specific multilingual settings for a product.

- Product multilingualism takes precedence over mini-program multilingualism. For specific logic, refer to [product multilingual](https://developer.tuya.com/en/docs/iot/product-language?id=K93ixsjagr67p).
- Panel multilingualism can be referenced [Panel SDK multilingual usage](/en/miniapp/solution-panel/ability/common/multi-language)