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 [blocked]

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

Globalization

📄 Read: references/globalization.md [blocked]

• 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 [blocked]

• 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 component package and theme package

npm install @syncfusion/ej2-react-grids@latest @syncfusion/ej2-tailwind3-theme@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-tailwind3-theme/styles/grid/index.css";

Register License Key

Step 1: Set the environment variable:

# Windowssetx SYNCFUSION_LICENSE "Your_License_Key_Here"
# Mac/Linuxexport 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 enablementenableRtl(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!';    }  });}, []);