Localization

ABP React provides multi-language support with dynamic resource loading.

useLocalization Hook

The useLocalization hook provides translation functions:

import { useLocalization } from '@abpjs/core';

function LocalizationExample() {
  const { t, instant } = useLocalization();

  return (
    <div>
      <h1>{t('Welcome')}</h1>
      <p>{t('HelloUser', { name: 'John' })}</p>
      <button>{t('Save')}</button>
    </div>
  );
}

API Reference

useLocalization Returns

Property	Type	Description
t	(key: string, params?: object) => string	Translate a key with optional interpolation
instant	(key: string, params?: object) => string	Synchronous translation

Translation with Parameters

Pass parameters for dynamic content:

const { t } = useLocalization();

// Assuming localization resource has: "HelloUser": "Hello, {name}!"
<p>{t('HelloUser', { name: 'John' })}</p>
// Output: "Hello, John!"

// With multiple parameters
// "ItemsFound": "Found {count} items in {category}"
<p>{t('ItemsFound', { count: 5, category: 'Books' })}</p>
// Output: "Found 5 items in Books"

Using Resource Keys

ABP organizes translations into resources. Access them with the resource prefix:

const { t } = useLocalization();

// From AbpIdentity resource
<p>{t('AbpIdentity::UserName')}</p>

// From AbpAccount resource
<p>{t('AbpAccount::Login')}</p>

// From your custom resource
<p>{t('MyApp::WelcomeMessage')}</p>

Available Languages

Access available languages from the configuration:

import { useConfig } from '@abpjs/core';

function LanguageSelector() {
  const { localization } = useConfig();
  const languages = localization?.languages || [];
  const currentLanguage = localization?.currentCulture?.name;

  return (
    <select value={currentLanguage}>
      {languages.map((lang) => (
        <option key={lang.cultureName} value={lang.cultureName}>
          {lang.displayName}
        </option>
      ))}
    </select>
  );
}

Changing Language

To change the language, update the URL or use a language switcher that reloads the configuration:

function LanguageSwitcher() {
  const changeLanguage = (cultureName: string) => {
    // Set culture cookie and reload
    document.cookie = `.AspNetCore.Culture=c=${cultureName}|uic=${cultureName}; path=/`;
    window.location.reload();
  };

  return (
    <button onClick={() => changeLanguage('tr')}>
      Türkçe
    </button>
  );
}

RTL (Right-to-Left) Support

The useDirection hook provides RTL support for Arabic, Hebrew, Persian, Urdu, and other RTL languages:

import { useDirection } from '@abpjs/core';

function MyComponent() {
  const { direction, isRtl, startSide, endSide } = useDirection();

  return (
    <div dir={direction}>
      {/* direction: 'rtl' or 'ltr' */}
      {/* isRtl: boolean */}
      {/* startSide: 'left' (LTR) or 'right' (RTL) */}
      {/* endSide: 'right' (LTR) or 'left' (RTL) */}
      <p>Content flows in {direction} direction</p>
    </div>
  );
}

useDirection Returns

Property	Type	Description
direction	'ltr' | 'rtl'	Current text direction
isRtl	boolean	Whether current language is RTL
startSide	'left' | 'right'	Start side based on direction
endSide	'left' | 'right'	End side based on direction

Using with Chakra UI Components

import { useDirection } from '@abpjs/core';
import { Menu } from '@chakra-ui/react';

function DirectionalMenu() {
  const { endSide } = useDirection();

  return (
    <Menu.Root positioning={{ placement: `${endSide}-start` }}>
      {/* Menu opens on the correct side based on language direction */}
      <Menu.Trigger>Open Menu</Menu.Trigger>
      <Menu.Content>
        <Menu.Item value="item1">Item 1</Menu.Item>
        <Menu.Item value="item2">Item 2</Menu.Item>
      </Menu.Content>
    </Menu.Root>
  );
}

selectLocalizationString (v1.0.0)

For Redux-based localization with interpolation:

import { selectLocalizationString } from '@abpjs/core';
import { useSelector } from 'react-redux';

function Component() {
  // Simple usage
  const greeting = useSelector(selectLocalizationString('HelloWorld'));

  // With default value
  const message = useSelector(
    selectLocalizationString({ key: 'WelcomeMessage', defaultValue: 'Welcome!' })
  );

  // With interpolation (positional parameters)
  const userGreeting = useSelector(
    selectLocalizationString('Hello, {0}!', 'John')
  );

  // Multiple parameters
  const itemsFound = useSelector(
    selectLocalizationString('Found {0} items in {1}', '5', 'Books')
  );

  return <div>{greeting}</div>;
}

Syntax

selectLocalizationString(
  key: string | Config.LocalizationWithDefault,
  ...interpolateParams: string[]
)

Parameters

Parameter	Type	Description
key	string | Config.LocalizationWithDefault	Localization key or object with key and defaultValue
interpolateParams	string[]	Values to interpolate into placeholders

Key Formats

// Resource-prefixed key
selectLocalizationString('AbpIdentity::UserName')

// Default resource (uses defaultResourceName from config)
selectLocalizationString('Welcome')

// With default value
selectLocalizationString({ key: 'CustomKey', defaultValue: 'Fallback' })

LocalizationService Enhancements (v1.1.0)

The LocalizationService methods now accept Config.LocalizationWithDefault in addition to string keys:

import { useAbp } from '@abpjs/core';

function LocalizationExample() {
  const { localizationService } = useAbp();

  // String key (existing)
  const text = localizationService.get('MyKey');

  // Object with default value (new in v1.1.0)
  const textWithDefault = localizationService.get({
    key: 'MyKey',
    defaultValue: 'Fallback text'
  });

  // With interpolation
  const greeting = localizationService.get('Hello {0}!', 'World');

  return <div>{greeting}</div>;
}

Affected Methods

Method	Description
get()	Get localized string
instant()	Synchronous translation
t()	Alias for get()

Config.LocalizationParam Type

import { Config } from '@abpjs/core';

// Union type for localization keys
type LocalizationParam = string | Config.LocalizationWithDefault;

// Usage
const key: Config.LocalizationParam = {
  key: 'MyKey',
  defaultValue: 'Default text'
};

Date.toLocalISOString() (v1.1.0)

Returns ISO string in local timezone (unlike toISOString() which returns UTC):

const date = new Date();

// Standard - returns UTC
date.toISOString();      // "2026-01-31T13:15:00.000Z"

// New - returns local timezone
date.toLocalISOString(); // "2026-01-31T16:15:00.000+03:00"

This is useful when you need to send dates to APIs that expect local timezone information.

Related

• Configuration - Application configuration