syncfusion-react-common

Q: How do I install syncfusion-react-common?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-common in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-common/ (personal) or .claude/skills/syncfusion-react-common/ (project).

by syncfusionFrontend & Design

Common utilities and features for Syncfusion React components. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion React components.

Installs: 733
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-common

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-common automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

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 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:

# 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!';
    }
  });
}, []);

FAQ

What does the syncfusion-react-common skill do?

How do I install syncfusion-react-common?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-common in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-common/ (personal) or .claude/skills/syncfusion-react-common/ (project).

Which AI agents can use syncfusion-react-common?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-common safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-common?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 733 recorded installs.