Syncfusion React Common

Common Features in Syncfusion React Components

Syncfusion React components include comprehensive common utilities and features that enhance user experience, ensure cross-cultural support, and provide foundational capabilities across all components. This skill covers installation setup, animations, globalization, state management, and security considerations for building robust React applications.

Table of Contents

• Navigation Guide
• Quick Start
• Common Features

Navigation Guide

Getting Started & Framework Setup

📄 Read: references/getting-started.md

• Framework integration (Next.js, Remix, Vite, Preact, SharePoint)
• Package installation and CSS imports
• Component initialization
• Quick start examples

Globalization

📄 Read: references/globalization.md

• Right-to-left (RTL) support for Arabic, Hebrew, Persian languages
• Localization (l10n) for multi-language support
• Internationalization (i18n) with CLDR data
• Number and currency formatting
• Date and time formatting

Advanced Features & Utilities

📄 Read: references/advanced-features.md

• Animation effects (FadeIn, ZoomOut, SlideUp, etc.)
• Animation timing (duration, delay, global settings)
• Drag-and-drop interactions (Draggable, Droppable)
• Template customization and optimization
• State persistence with enablePersistence
• Security best practices and HTML sanitization

Quick Start

Install Syncfusion React Package

npm install @syncfusion/ej2-react-grids@latest --save

Note: The @syncfusion/ej2-base package is a dependency for all Syncfusion components and will be automatically installed when you install any Syncfusion React package. You don't need to explicitly add it to your package.json file.

Import Styles

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

Register License Key

Step 1: Set the environment variable:

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

Step 2: Activate the license using NPX command:

npx syncfusion-license activate

Note: For alternative license registration methods, kindly refer to the Syncfusion license key registration documentation.

Basic Component Setup

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];

  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='Freight' width='100' format="C2" />
      </ColumnsDirective>
      <Inject services={[Page]} />
    </GridComponent>
  );
}

export default App;

Common Features

Enable State Persistence

<GridComponent dataSource={data} enablePersistence={true}>
  {/* Component content */}
</GridComponent>

Enable RTL Support

import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

// OR per-component
<ListViewComponent enableRtl={true} />

Add Animation Effects

import { Animation } from '@syncfusion/ej2-base';

useEffect(() => {
  const animation = new Animation({ duration: 5000, delay: 2000 });
  animation.animate(element, { name: 'FadeOut' });
}, []);

Implement Drag-and-Drop

import { Draggable, Droppable } from '@syncfusion/ej2-base';

useEffect(() => {
  const draggable = new Draggable(document.getElementById('draggable'), { clone: false });
  const droppable = new Droppable(document.getElementById('droppable'), {
    drop: (e) => {
      e.droppedElement.textContent = 'Dropped!';
    }
  });
}, []);

Advanced Features and Utilities

Table of Contents

• Animation Effects
• Animation Timing
• Global Animation Control
• Drag and Drop
• Draggable Configuration
• Droppable Configuration
• Template Customization
• State Persistence
• Security Best Practices

Animation Effects

The Animation utility creates smooth visual transitions for HTML elements. Syncfusion provides built-in animation effects that enhance user experience.

Available Animation Effects

• Fade: FadeIn, FadeOut, FadeZoomIn, FadeZoomOut
• Flip: FlipLeftDownIn, FlipLeftDownOut, FlipLeftUpIn, FlipLeftUpOut, FlipRightDownIn, FlipRightDownOut, FlipRightUpIn, FlipRightUpOut, FlipXDownIn, FlipXDownOut, FlipXUpIn, FlipXUpOut, FlipYLeftIn, FlipYLeftOut, FlipYRightIn, FlipYRightOut
• Slide: SlideBottomIn, SlideBottomOut, SlideDownIn, SlideDownOut, SlideLeftIn, SlideLeftOut, SlideRightIn, SlideRightOut, SlideTopIn, SlideTopOut, SlideUpIn, SlideUpOut
• Zoom: ZoomIn, ZoomOut
• None: Disables animation

Basic Animation Example

import * as React from 'react';
import { useEffect, useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';

function App() {
  const element1 = useRef(null);
  const element2 = useRef(null);

  useEffect(() => {
    const animation = new Animation();
    
    // Apply FadeOut to element1
    if (element1.current) {
      animation.animate(element1.current, { name: 'FadeOut' });
    }
    
    // Apply ZoomOut to element2
    if (element2.current) {
      animation.animate(element2.current, { name: 'ZoomOut' });
    }
  }, []);

  return (
    <div id="container">
      <div id="element1" ref={element1} style={{ width: '100px', height: '100px', backgroundColor: '#4CAF50' }} />
      <div id="element2" ref={element2} style={{ width: '100px', height: '100px', backgroundColor: '#2196F3' }} />
    </div>
  );
}

export default App;

Animation Timing

Control animation speed and timing with duration and delay properties:

• duration: Total time in milliseconds for animation to complete (default: 400ms)
• delay: Time in milliseconds before animation starts (default: 0ms)

import * as React from 'react';
import { useEffect, useRef } from 'react';
import { Animation } from '@syncfusion/ej2-base';

function App() {
  const element1 = useRef(null);
  const element2 = useRef(null);

  useEffect(() => {
    // Create animation with custom timing
    const animation = new Animation({ delay: 2000, duration: 5000 });
    
    if (element1.current) {
      animation.animate(element1.current, { name: 'FadeOut' });
    }
    
    if (element2.current) {
      animation.animate(element2.current, { name: 'ZoomOut' });
    }
  }, []);

  return (
    <div id="container">
      <div id="element1" ref={element1} style={{ width: '100px', height: '100px', backgroundColor: '#FF9800' }} />
      <div id="element2" ref={element2} style={{ width: '100px', height: '100px', backgroundColor: '#E91E63' }} />
    </div>
  );
}

export default App;

Global Animation Control

Control animations for all Syncfusion components globally:

import { GlobalAnimationMode, setGlobalAnimation } from "@syncfusion/ej2-base";

// Call in your application entry point before initializing components

// Enable animations globally (overrides component settings)
setGlobalAnimation(GlobalAnimationMode.Enable);

// Disable animations globally (overrides component settings)
setGlobalAnimation(GlobalAnimationMode.Disable);

// Use component's own animation settings (default)
setGlobalAnimation(GlobalAnimationMode.Default);

Note: The setGlobalAnimation method controls JavaScript-based animations through component APIs and the Animation library. It does not affect CSS-based animations or direct style-based animation properties.

Drag and Drop

Implement custom drag-and-drop interactions using Draggable and Droppable utilities from @syncfusion/ej2-base.

Draggable Utility

Transform any DOM element into a draggable item:

import * as React from 'react';
import { useEffect } from 'react';
import { Draggable } from '@syncfusion/ej2-base';

function App() {
  useEffect(() => {
    // Create draggable element
    const draggable = new Draggable(document.getElementById('element'), { clone: false });
  }, []);

  return (
    <div id='container'>
      <div id='element' style={{ width: '100px', height: '100px', backgroundColor: '#4CAF50', cursor: 'move', padding: '10px' }}>
        <p>Draggable Element</p>
      </div>
    </div>
  );
}

export default App;

Draggable Configuration

Clone Option

Create a visual copy during drag operation:

const draggable = new Draggable(document.getElementById('element'), { clone: true });

When clone: true, the original element stays in place while a copy follows the cursor.

Drag Area Constraint

Restrict dragging to a specific region:

const draggable = new Draggable(document.getElementById('draggable'), { 
  clone: false, 
  dragArea: "#droppable"  // Restrict to #droppable container
});

Complete Draggable Example

import * as React from 'react';
import { useEffect } from 'react';
import { Draggable } from '@syncfusion/ej2-base';

function App() {
  useEffect(() => {
    // Draggable with clone and drag area constraints
    const draggable = new Draggable(document.getElementById('draggable'), { 
      clone: false, 
      dragArea: "#droppable" 
    });
  }, []);

  return (
    <div id='container'>
      <div id='droppable' style={{ border: '2px dashed #ccc', padding: '20px', minHeight: '200px' }}>
        <p>Drag Area</p>
      </div>
      <div id='draggable' style={{ width: '100px', height: '100px', backgroundColor: '#4CAF50', cursor: 'move', marginTop: '10px' }}>
        <p id='drag'>Draggable Element</p>
      </div>
    </div>
  );
}

export default App;

Droppable Configuration

A droppable zone accepts and responds to draggable elements:

import * as React from 'react';
import { useEffect } from 'react';
import { Draggable, Droppable, DropEventArgs } from '@syncfusion/ej2-base';

function App() {
  useEffect(() => {
    const draggable = new Draggable(document.getElementById('draggable'), { clone: false });
    
    const droppable = new Droppable(document.getElementById('droppable'), {
      drop: (e: DropEventArgs) => {
        // Handle drop event
        e.droppedElement.querySelector('#drag').textContent = 'Dropped Successfully!';
        console.log('Dropped element:', e.droppedElement);
        console.log('Target:', e.target);
      }
    });
  }, []);

  return (
    <div id='container'>
      <div id='droppable' style={{ border: '2px solid #2196F3', padding: '20px', minHeight: '200px', backgroundColor: '#E3F2FD' }}>
        <p>Drop Zone</p>
      </div>
      <div id='draggable' style={{ width: '100px', height: '100px', backgroundColor: '#4CAF50', cursor: 'move', marginTop: '10px' }}>
        <p id='drag'>Draggable</p>
      </div>
    </div>
  );
}

export default App;

Template Customization

Templates allow customizing component layouts with React components:

import './App.css';
import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

export default function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', ShipCountry: 'France' },
    { OrderID: 10249, CustomerID: 'TOMSP', ShipCountry: 'Germany' },
    { OrderID: 10250, CustomerID: 'HANAR', ShipCountry: 'Brazil' }
  ];

  // Template function receives row data as props
  function gridTemplate(props) {
    return (
      <div className='custom'>
        <ButtonComponent>{props.ShipCountry}</ButtonComponent>
      </div>
    );
  }

  return (
    <GridComponent dataSource={data}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='ShipCountry' width='100' template={gridTemplate} />
      </ColumnsDirective>
    </GridComponent>
  );
}

Stateless Templates for Performance

Exclude templates from state-driven re-renders to improve performance:

import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';

function nodeTemplate(props) {
  return <span>{props.text}</span>;
}

function App() {
  return (
    <TreeViewComponent 
      fields={fields}
      // Exclude nodeTemplate from React state updates
      statelessTemplates={['nodeTemplate']}
      nodeTemplate={nodeTemplate}
    />
  );
}

For Grid with nested directives:

<GridComponent dataSource={data} statelessTemplates={['directiveTemplates']}>
  <ColumnsDirective>
    <ColumnDirective field="name" headerText="Name" />
    <ColumnDirective field="status" headerText="Status" template={renderStatusCell} />
  </ColumnsDirective>
</GridComponent>

State Persistence

Automatically persist component state to browser localStorage across page refreshes:

import { GridComponent } from '@syncfusion/ej2-react-grids';

export let data: Object[] = [
    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 }
];

function App() {
  const pageSettings = { pageSize: 6 };

  return (
    <GridComponent 
      dataSource={data}
      enablePersistence={true}  // Enable persistence
      allowPaging={true}
      pageSettings={pageSettings}
    >
      {/* Grid content */}
    </GridComponent>
  );
}

export default App;

Managing Persisted Data

// Clear persisted state for a component
localStorage.removeItem('grid-state-key');

// Disable persistence
<GridComponent enablePersistence={false} ... />

Security Best Practices

When working with Syncfusion React components, follow secure coding practices to protect your application and user data.

Note: For comprehensive security guidelines and best practices, please refer to the Syncfusion Security Documentation.

Getting Started with Syncfusion React Components

Table of Contents

• Overview
• Framework Integration
• Next.js Setup
• Remix Setup
• Vite Setup
• Preact Setup
• SharePoint Setup

Overview

Syncfusion React components are available as npm packages and work seamlessly with modern JavaScript frameworks. This guide covers installation, CSS imports, and initialization for popular frameworks.

Framework Integration

Syncfusion Package Installation

All Syncfusion React components are distributed via npm at npmjs.com. Install the required component package:

npm install @syncfusion/ej2-react-grids@latest --save

CSS Theme Import

Choose one theme and import it in your main CSS file or entry point:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

Available themes: tailwind3, bootstrap5.3, fluent2, material3, etc.. (replace theme name in CSS path)

Next.js Setup

Step 1: Install Package

npm install @syncfusion/ej2-react-grids@latest --save

Step 2: Import Styles in app/globals.css

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

Step 3: Create Datasource File (app/datasource.ts)

export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims',
        ShipCountry: 'France', Freight: 32.38
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster',
        ShipCountry: 'Germany', Freight: 11.61
    }
];

Step 4: Add Component in app/page.tsx

'use client'
import {
  ColumnDirective, ColumnsDirective, GridComponent,
  Inject, Page, Sort, Filter, Group
} from '@syncfusion/ej2-react-grids';
import { data } from "./datasource";

export default function Home() {
  const pageSettings: object = { pageSize: 6 };
  const filterSettings: object = { type: 'Excel' };

  return (
    <GridComponent
      dataSource={data}
      allowGrouping={true}
      allowSorting={true}
      allowFiltering={true}
      allowPaging={true}
      pageSettings={pageSettings}
      filterSettings={filterSettings}
    >
      <ColumnsDirective>
        <ColumnDirective field="OrderID" width="100" textAlign="Right" />
        <ColumnDirective field="CustomerID" width="100" />
        <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
        <ColumnDirective field="Freight" width="100" format="C2" textAlign="Right" />
        <ColumnDirective field="ShipCountry" width="100" />
      </ColumnsDirective>
      <Inject services={[Page, Sort, Filter, Group]} />
    </GridComponent>
  );
}

Remix Setup

Step 1: Install Package

npm install @syncfusion/ej2-react-grids@latest --save

Step 2: Configure vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  ssr: {
    noExternal: [/@syncfusion/]
  }
});

Step 3: Import Styles in ~/app/routes/_index.tsx

import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-calendars/styles/tailwind3.css';
import '@syncfusion/ej2-dropdowns/styles/tailwind3.css';
import '@syncfusion/ej2-inputs/styles/tailwind3.css';
import '@syncfusion/ej2-navigations/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
import '@syncfusion/ej2-react-grids/styles/tailwind3.css';

Step 4: Add Component

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
import { data } from '../datasource';

export default function Index() {
  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field="OrderID" width="100" textAlign="Right" />
        <ColumnDirective field="CustomerID" width="100" />
        <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
        <ColumnDirective field="Freight" width="100" format="C2" textAlign="Right" />
        <ColumnDirective field="ShipCountry" width="100" />
      </ColumnsDirective>
      <Inject services={[Page, Sort]} />
    </GridComponent>
  );
}

Vite Setup

Step 1: Install Package

npm install @syncfusion/ej2-react-grids@latest --save

Step 2: Import Styles in src/App.css

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

Step 3: Add Component in src/App.jsx

import './App.css'
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 }
  ];

  return (
    <GridComponent dataSource={data}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' textAlign="Right" />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
        <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
        <ColumnDirective field='ShipCountry' width='100' />
      </ColumnsDirective>
    </GridComponent>
  );
}

export default App;

Preact Setup

Step 1: Install Package

npm install @syncfusion/ej2-react-grids@latest --save

Step 2: Import Styles in src/style.css

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-grids/styles/tailwind3.css";

Step 3: Add Component in src/index.jsx

import { render } from 'preact';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import './style.css';

export function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 }
  ];

  return (
    <GridComponent dataSource={data}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' textAlign="Right" />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
        <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
        <ColumnDirective field='ShipCountry' width='100' />
      </ColumnsDirective>
    </GridComponent>
  );
}

render(<App />, document.getElementById('app'));

SharePoint Setup

Step 1: Install Package

npm install @syncfusion/ej2-react-grids@latest --save

Step 2: Import Styles in App.tsx

Import theme CSS in your SharePoint component file:

require('@syncfusion/ej2-react-grids/styles/tailwind3.css');

Step 3: Add Component in ~/src/webparts/app/components/App.tsx

import * as React from 'react';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';

require('@syncfusion/ej2-react-grids/styles/tailwind3.css');

export default class App extends React.Component {
  public render(): React.ReactElement {
    const data = [
      { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38 },
      { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61 },
      { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83 }
    ];

    return (
      <GridComponent dataSource={data}>
        <ColumnsDirective>
          <ColumnDirective field='OrderID' width='100' textAlign="Right" />
          <ColumnDirective field='CustomerID' width='100' />
          <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
          <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
          <ColumnDirective field='ShipCountry' width='100' />
        </ColumnsDirective>
      </GridComponent>
    );
  }
}

Globalization

Table of Contents

• Right-to-Left (RTL) Support
• Localization (l10n)
• Internationalization (i18n)

Right-to-Left (RTL) Support

RTL support is essential for languages like Arabic, Hebrew, and Persian where text flows from right to left.

Enable RTL Globally

Use the enableRtl function to apply RTL rendering to all components:

import * as React from 'react';
import { enableRtl } from '@syncfusion/ej2-base';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

// Enable RTL for all components
enableRtl(true);

function App() {
  const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

  return (
    <ListViewComponent 
      id='list' 
      dataSource={data} 
      showHeader={true} 
      headerTitle='Painting types'
    />
  );
}

export default App;

Enable RTL for Individual Components

For selective RTL support, set the enableRtl property on specific components:

import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics"];

  return (
    <ListViewComponent 
      id='list' 
      dataSource={data}
      enableRtl={true}
      showHeader={true}
      headerTitle='أنواع الرسم'
    />
  );
}

export default App;

Localization (l10n)

Localization translates static UI text in components into different languages.

Install Locale Package

npm install @syncfusion/ej2-locale@latest

Load Translations

Load pre-built locale files for common languages:

import { L10n } from '@syncfusion/ej2-base';
import * as frLocale from '@syncfusion/ej2-locale/src/fr.json';

L10n.load({ 'fr-FR': frLocale });

// Set locale for components
<GridComponent locale='fr-FR' ... />

Load Custom Translations

import * as React from 'react';
import { L10n } from '@syncfusion/ej2-base';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Group } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';

L10n.load({
    'de-DE': {
        'grid': {
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte'
        },
        'pager': {
            'currentPageInfo': '{0} von {1} Seiten',
            'totalItemsInfo': '({0} Beiträge)'
        }
    }
});

function App() {
  const pageSettings = { pageSize: 6 };

  return (
    <GridComponent 
      dataSource={data} 
      locale='de-DE'  // specify the corresponding locale
      allowPaging={true}
      pageSettings={pageSettings}
      allowGrouping={true}
    >
      <ColumnsDirective>
        <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right" />
        <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
        <ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
        <ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
      </ColumnsDirective>
      <Inject services={[Page, Group]} />
    </GridComponent>
  );
}

export default App;

Change Global Locale

import { L10n, setCulture } from '@syncfusion/ej2-base';

L10n.load({
    'fr-BE': {
       'grid': {
             'EmptyRecord': 'Aucun enregistrement à afficher.',
             'InvalidFilterMessage': 'Données de filtrage invalides.'
         }
     }
});

// Change culture globally
setCulture('fr-BE');

Internationalization (i18n)

Internationalization enables formatting of dates, numbers, and currencies according to culture-specific rules using CLDR data.

Install CLDR Data

npm install @syncfusion/ej2-cldr-data@latest

Load CLDR Data

import { loadCldr } from "@syncfusion/ej2-base";
import enNumberData from "@syncfusion/ej2-cldr-data/main/en/numbers.json";
import enTimeZoneData from "@syncfusion/ej2-cldr-data/main/en/timeZoneNames.json";
import enGregorian from "@syncfusion/ej2-cldr-data/main/en/ca-gregorian.json";
import enCurrencies from "@syncfusion/ej2-cldr-data/main/en/currencies.json";
import numberingSystems from "@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json";

// Load data for English (optional for en-US as it's preloaded)
loadCldr(enNumberData, enTimeZoneData, enGregorian, enCurrencies, numberingSystems);

// Load data for other cultures
import deNumberData from "@syncfusion/ej2-cldr-data/main/de/numbers.json";
import deGregorian from "@syncfusion/ej2-cldr-data/main/de/ca-gregorian.json";

loadCldr(deNumberData, deGregorian, numberingSystems);

Set Global Culture and Currency

import { setCulture, setCurrencyCode } from '@syncfusion/ej2-base';

// Set culture to German
setCulture('de-DE');

// Set currency to Euro
setCurrencyCode('EUR');

Format Numbers

import * as React from 'react';
import { Internationalization } from '@syncfusion/ej2-base';

function App() {
  const intl = new Internationalization();
  
  // Standard number formatting
  const numFormatted = intl.formatNumber(12345.65, { format: 'N2' });
  
  // Currency formatting
  const currFormatted = intl.formatNumber(1234.56, { format: 'C2', currency: 'USD' });
  
  // Percentage formatting
  const percFormatted = intl.formatNumber(0.80, { format: 'P2' });

  return (
    <div>
      <p>Number: {numFormatted}</p>
      <p>Currency: {currFormatted}</p>
      <p>Percentage: {percFormatted}</p>
    </div>
  );
}

export default App;

Parse Numbers

import { Internationalization } from '@syncfusion/ej2-base';

const intl = new Internationalization();

// Parse formatted number back to numeric value
const parsed = intl.parseNumber('$1,234.56', { format: 'C2', currency: 'USD' });
// Result: 1234.56

Date and Time Formatting

Format dates according to culture-specific rules:

import { Internationalization } from '@syncfusion/ej2-base';

const intl = new Internationalization();

// Standard date formats
const shortDate = intl.formatDate(new Date(), { type: 'date', skeleton: 'short' });
// Output: 11/4/16

const mediumDate = intl.formatDate(new Date(), { type: 'date', skeleton: 'medium' });
// Output: Nov 4, 2016

const longDate = intl.formatDate(new Date(), { type: 'date', skeleton: 'long' });
// Output: November 4, 2016

const fullDate = intl.formatDate(new Date(), { type: 'date', skeleton: 'full' });
// Output: Friday, November 4, 2016

// Time formats
const shortTime = intl.formatDate(new Date(), { type: 'time', skeleton: 'short' });
// Output: 1:03 PM

const mediumTime = intl.formatDate(new Date(), { type: 'time', skeleton: 'medium' });
// Output: 1:03:04 PM

// DateTime formats
const dateTime = intl.formatDate(new Date(), { type: 'dateTime', skeleton: 'full' });
// Output: Friday, November 4, 2016 at 1:03:04 PM GMT+05:30

Custom Date Formats

Use custom format patterns:

import { Internationalization } from '@syncfusion/ej2-base';

const intl = new Internationalization();

// Custom patterns using symbols: y, M, d, h, m, s, a, z
const customFormat = intl.formatDate(new Date('1/12/2014 10:20:33'), { 
  format: "'year:' y 'month:' MM 'day:' dd" 
});
// Output: year: 2014 month: 01 day: 12

Parse Dates

import { Internationalization } from '@syncfusion/ej2-base';

const intl = new Internationalization();

// Parse formatted date string back to Date object
const parsed = intl.parseDate('Nov 4, 2016', { skeleton: 'medium', type: 'date' });
// Result: Date object

Format Specifiers

Number Format Specifiers

Date Format Symbols