syncfusion/ej2-react-ui-components

Purpose and Distribution

This is Syncfusion Essential JS 2’s React component-library source, organized as independently publishable feature packages rather than an application. Each package exposes React wrappers for a component family and corresponding theme SCSS. Primary package entry points are family barrels such as components/grids/src/index.ts, components/charts/src/index.ts, and components/inputs/src/index.ts.

React Wrapper Foundation

components/base is the shared React integration layer. Its base classes, template support, utilities, and services provide the common wrapper behavior used by feature packages:

• components/base/src/component-base.ts

• components/base/src/complex-base.ts

• components/base/src/template.ts

The architectural boundary is React JSX/props and nested children on one side, and the underlying EJ2 control implementation on the other.

Feature-Package Structure

Each domain package follows a consistent composition: package-level barrel, optional global registrations, individual control wrapper(s), and child/directive wrappers for declarative nested configuration. For example, the Grid’s control and column/aggregate definitions are separated:

• components/grids/src/index.ts

• components/grids/src/grid/grid.component.tsx

• components/grids/src/grid/columns-directive.tsx

This enables consumers to import only the packages and control features they use.

Declarative Configuration Flow

A consumer renders a React control wrapper with props and nested directive components. Wrapper components translate React lifecycle and property changes into EJ2 control configuration; directive components represent structured child collections such as series, axes, columns, rows, resources, or dialog actions. Representative complex control boundaries:

• components/charts/src/chart/chart.component.tsx

• components/charts/src/chart/series-directive.tsx

• components/schedule/src/schedule/resources-directive.tsx

Runtime events and control state flow back through the wrapper’s React-facing APIs. Application data sources, persistence, HTTP endpoints, and server behavior are consumer-provided, not implemented as repository services.

Component Domains

The repository is partitioned by product domain, with isolated implementations and exports:

• Data controls: components/grids/src/grid/grid.component.tsx, components/treegrid/src/treegrid/treegrid.component.tsx, components/pivotview/src/pivotview/pivotview.component.tsx

• Visualization: components/charts/src/chart/chart.component.tsx, components/maps/src/maps/maps.component.tsx, components/diagrams/src/diagram/diagram.component.tsx

• Editing/document surfaces: components/spreadsheet/src/spreadsheet/spreadsheet.component.tsx, components/documenteditor/src/document-editor/documenteditor.component.tsx, components/richtexteditor/src/rich-text-editor/richtexteditor.component.tsx

• General UI primitives and navigation: components/buttons/src/button/button.component.tsx, components/dropdowns/src/drop-down-list/dropdownlist.component.tsx, components/navigations/src/treeview/treeview.component.tsx

Styling and Themes

Styling is separately distributed SCSS rather than embedded in wrappers. Packages provide full and -lite theme entry files plus control-scoped styles; consumers select a compatible theme bundle. Themes include Material, Bootstrap variants, Fabric, Fluent, Tailwind, BDS, and high-contrast:

• components/grids/styles/material.scss

• components/grids/styles/grid/material.scss

• components/charts/styles/bootstrap5.scss

This is a key packaging boundary: TypeScript/TSX exports supply behavior, while explicit SCSS imports supply visual presentation.

Runtime and Build Boundaries

Source is TypeScript and TSX for React, compiled per package using local TypeScript configuration and Gulp build definitions:

• components/base/tsconfig.json

• components/grids/tsconfig.json

• components/grids/gulpfile.js

The library depends conceptually on React and Syncfusion EJ2 runtime/control packages; this repository contains the React-facing adapters and styles, not a deployable web application or backend infrastructure.