Localization support in React Components

Localization (L10N) adapts the user-facing text in Syncfusion^® React components to a specific language or region. It replaces built-in labels, tooltips, messages, placeholders, and other UI strings with translations so users can interact with your app in their preferred language.

Getting started with localization

To enable localization in your Syncfusion® React application, follow these steps:

Installing Syncfusion® React package

To use the React Locale data, install the @syncfusion/react-locale package:

npm i @syncfusion/react-locale

npm i @syncfusion/react-locale

Import and load locale data

Import the required culture files and load them using the L10n.load method from @syncfusion/react-base.

import { L10n, Provider } from '@syncfusion/react-base';
import french from '@syncfusion/react-locale/src/fr.json';

L10n.load(french);

import { L10n, Provider } from '@syncfusion/react-base';
import french from '@syncfusion/react-locale/src/fr.json';

L10n.load(french);

Apply locale using Provider

To apply localization, wrap your React components with the Provider component. Then, set the desired language by passing the appropriate culture code to the locale prop. This ensures that all child components display text and UI elements in the selected language.

import { Grid, Column, Columns, TextAlign, FilterBarType, ColumnType, EditType, ClipMode } from '@syncfusion/react-grid';
import { L10n, Provider } from '@syncfusion/react-base';
import french from '@syncfusion/react-locale/src/fr.json';
import { orderDetails } from './orderDetails';

L10n.load(french);

export default function App() {
  const editSettings = { allowEdit: true, allowAdd: true, allowDelete: true };
  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  return (
      <Provider locale={'fr'}>
        <Grid dataSource={orderDetails} editSettings={editSettings} toolbar={toolbarOptions}  pageSettings={{ enabled: true, pageSize: 5, pageCount: 4 }}>
          <Columns>
            <Column field='OrderID' headerText='Order ID' width='100' isPrimaryKey={true} textAlign={TextAlign.Right} filter={{filterBarType:FilterBarType.NumericTextBox}}></Column>
            <Column field='CustomerName' headerText='Customer Name' width='140' clipMode={ClipMode.EllipsisWithTooltip}></Column>
            <Column field='OrderDate' headerText='Order Date' width='170' edit={{ type: EditType.DatePicker }} type={ColumnType.Date} textAlign={TextAlign.Right} filter={{filterBarType:FilterBarType.DatePicker}} format='yMd' />
            <Column field="ShipName" headerText="Ship Name" clipMode={ClipMode.EllipsisWithTooltip} width="150"  />
            <Column field='ShipCountry' headerText='Ship Country' width='140' edit={{ type: 'dropdownedit' }}></Column>
            <Column field='Freight' headerText='Freight Charges' width='140' format='C2' textAlign={TextAlign.Right} filter={{filterBarType:FilterBarType.NumericTextBox}} edit={{ type: EditType.NumericTextBox }}/>
          </Columns>
        </Grid>
      </Provider>
  );
}

import { Grid, Column, Columns, TextAlign, FilterBarType, ColumnType, EditType, ClipMode } from '@syncfusion/react-grid';
import { L10n, Provider } from '@syncfusion/react-base';
import french from '@syncfusion/react-locale/src/fr.json';
import { orderDetails } from './orderDetails';

L10n.load(french);

export default function App() {
  const editSettings = { allowEdit: true, allowAdd: true, allowDelete: true };
  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  return (
      <Provider locale={'fr'}>
        <Grid dataSource={orderDetails} editSettings={editSettings} toolbar={toolbarOptions}  pageSettings={{ enabled: true, pageSize: 5, pageCount: 4 }}>
          <Columns>
            <Column field='OrderID' headerText='Order ID' width='100' isPrimaryKey={true} textAlign={TextAlign.Right} filter={{filterBarType:FilterBarType.NumericTextBox}}></Column>
            <Column field='CustomerName' headerText='Customer Name' width='140' clipMode={ClipMode.EllipsisWithTooltip}></Column>
            <Column field='OrderDate' headerText='Order Date' width='170' edit={{ type: EditType.DatePicker }} type={ColumnType.Date} textAlign={TextAlign.Right} filter={{filterBarType:FilterBarType.DatePicker}} format='yMd' />
            <Column field="ShipName" headerText="Ship Name" clipMode={ClipMode.EllipsisWithTooltip} width="150"  />
            <Column field='ShipCountry' headerText='Ship Country' width='140' edit={{ type: 'dropdownedit' }}></Column>
            <Column field='Freight' headerText='Freight Charges' width='140' format='C2' textAlign={TextAlign.Right} filter={{filterBarType:FilterBarType.NumericTextBox}} edit={{ type: EditType.NumericTextBox }}/>
          </Columns>
        </Grid>
      </Provider>
  );
}

This sample demonstrates rendering the Grid component in French culture.

Dynamic Locale Switching

This demo shows how to dynamically switch the language of Syncfusion® React components at runtime. Update the locale prop in the Provider to the selected culture, and the UI will reflect the change instantly.