Skip to main content

Documentation Index

Fetch the complete documentation index at: https://learn.social.plus/llms.txt

Use this file to discover all available pages before exploring further.

The social.plus UIKit uses a platform-native localization system on each platform. Select your platform below.

Overview

The Web UIKit v4 resolves every UI string through a 5-level priority chain. Higher levels win; missing keys fall through to the next level automatically.
PriorityLevelSource
Highest1Config text via CustomizationProvider (remote config)
2Programmatic key overrides (overrides prop)
3Locale bundle (localeBundle prop or localeMap auto-detection)
4Built-in English defaults
Lowest5Raw key name (safety fallback for missing keys)

Built-in Languages

LanguageLocale CodeCoverage
EnglishenFull (~889 keys) — always the fallback
ThaithPartial (~500 keys) — auto-detected for th / th-* browser locales
English is always the final fallback. Any key missing from a custom bundle resolves to its English value automatically.

Provider Props

Configure localization via the localization prop on AmityUIKitProvider.
PropTypeDescription
localeBundleRecord<string, string>Explicitly set a locale bundle. Takes precedence over localeMap auto-detection.
overridesRecord<string, string>Merge-override individual keys on top of the active locale.
localeMapRecord<string, Record<string, string>>Map of locale code → bundle for automatic device-language detection via navigator.language. Replaces the default locale map when provided.
import { thLocaleBundle } from '@amityco/ui-kit';

<AmityUIKitProvider
  apiKey="..."
  userId="..."
  displayName="..."
  apiRegion="us"
  localization={{
    localeBundle: thLocaleBundle,
  }}
>
  <App />
</AmityUIKitProvider>

Scenarios

import { thLocaleBundle } from '@amityco/ui-kit';

<AmityUIKitProvider
  localization={{ localeBundle: thLocaleBundle }}
>
  <App />
</AmityUIKitProvider>
import { thLocaleBundle } from '@amityco/ui-kit';

<AmityUIKitProvider
  localization={{ localeMap: { th: thLocaleBundle } }}
>
  <App />
</AmityUIKitProvider>
The UIKit checks navigator.language — exact match first (e.g. "th"), then language-prefix match (e.g. "th-TH""th"). Falls back to English if no match is found.
<AmityUIKitProvider
  localization={{
    overrides: {
      'amity_common_button_cancel': 'Dismiss',
      'amity_social_button_delete_post_title': 'Remove this post?',
    },
  }}
>
  <App />
</AmityUIKitProvider>
Overrides merge on top of the active locale — only specified keys are replaced.
useLocale controls the active locale. useString consumes strings and automatically re-renders all consumers when the locale changes.
import { useLocale, useString } from '@amityco/ui-kit';
import jaLocale from './locales/ja.json';

function LanguageSwitcher() {
  const { setLocaleBundle, clearLocaleBundle } = useLocale();

  return (
    <>
      <button onClick={() => setLocaleBundle(jaLocale)}>日本語</button>
      <button onClick={() => clearLocaleBundle()}>English</button>
    </>
  );
}

// Any child component — automatically re-renders on locale change
function CancelButton() {
  const label = useString('amity_common_button_cancel');
  return <button>{label}</button>;
}

Translation Key Reference

Key naming conventions

PrefixDomainExample KeyExample Value
amity_common_button_*Shared buttonsamity_common_button_cancel"Cancel"
amity_common_time_*Relative timestampsamity_common_time_time_days_suffix"d"
amity_common_ad_*Ad labelsamity_common_ad_sponsored"Sponsored"
amity_social_button_*Social action buttonsamity_social_button_block_user"Block user"
amity_social_label_*Social text labelsamity_social_label_follow_requests"Follow requests (%1$d)"
amity_social_modal_dialog_*Modal/dialog textamity_social_modal_dialog_generic_error"Oops! something went wrong..."
amity_social_error_*Error messagesamity_social_error_post_text_exceed_error_message"...exceeds the %1$d characters limit"
amity_social_empty_state_*Empty state messages
amity_chat_*Chat UI stringsamity_chat_label_loading_chat"Loading chat..."
amity_livechat_*Live chat stringsamity_livechat_notification_copy_message"Message copied"

Format specifiers

SpecifierMeaningExample
%s / %1$s / %2$sPositional string substitution"By %s"
%d / %1$d / %2$dInteger substitution"Follow requests (%1$d)"
%@iOS-style string (treated as %s)
Translation keys are shared across platforms. The %@ specifier is native to iOS; the web renderer normalizes it to string substitution automatically.
For the complete list of ~889 keys, refer to en.json in the UIKit source repository.

How to Add a New Language

1

Create a translation file

Create a flat JSON file with the keys you want to translate. You only need to include keys you’re translating — missing keys automatically fall back to English.
{
  "amity_common_button_cancel": "キャンセル",
  "amity_common_button_delete": "削除",
  "amity_social_button_block_user": "ユーザーをブロック"
}
2

Register via localeMap

Pass the bundle via localeMap so the UIKit auto-detects it from navigator.language:
import jaLocale from './locales/ja.json';
import { thLocaleBundle } from '@amityco/ui-kit';

<AmityUIKitProvider
  localization={{
    localeMap: {
      th: thLocaleBundle, // preserve built-in Thai auto-detection
      ja: jaLocale,       // add Japanese
    },
  }}
>
  <App />
</AmityUIKitProvider>
Providing localeMap replaces the default locale map entirely. Include th: thLocaleBundle explicitly if you want to preserve built-in Thai auto-detection alongside your new language.
3

Verify coverage

Compare your translation file against en.json to identify missing keys. Any untranslated key silently falls back to English — no errors are thrown.