Syncfusion React UI Components

https://github.com/syncfusion/ej2-react-ui-components
Admin
Syncfusion's React UI Components library offers over 70 lightweight, responsive, modular, and...
Tokens:34,071
Snippets:710
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Navigations Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/navigations/README.md

Use this command to install the navigations package and its dependencies.

```sh
npm install @syncfusion/ej2-react-navigations
```

--------------------------------

### Install MultiColumn ComboBox

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/multicolumncombobox/README.md

Install the MultiColumn ComboBox and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-multicolumn-combobox
```

--------------------------------

### Install ej2-react-popups

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/popups/README.md

Install the popup components and their dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-popups
```

--------------------------------

### Install EJ2 React Layouts Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/layouts/README.md

Use this command to install the Layout components and their dependencies.

```sh
npm install @syncfusion/ej2-react-layouts
```

--------------------------------

### Install Calendars Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/calendars/README.md

Use this command to install the calendars package and its dependencies.

```sh
npm install @syncfusion/ej2-react-calendars
```

--------------------------------

### Install Dropdowns Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/dropdowns/README.md

Install the @syncfusion/ej2-react-dropdowns package using npm. This command installs the core dropdowns functionality for React applications.

```bash
npm install @syncfusion/ej2-react-dropdowns
```

--------------------------------

### Create React App and Install Dependencies

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/README.md

Use create-react-app to set up a new React project and install necessary packages.

```bash
npm install -g create-react-app
create-react-app quickstart
cd quickstart
npm install
```

--------------------------------

### Install ej2-react-base

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/README.md

Install the ej2-react-base package and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-base
```

--------------------------------

### Install EJ2 React Inputs Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/inputs/README.md

Use this command to install the @syncfusion/ej2-react-inputs package and its dependencies.

```sh
npm install @syncfusion/ej2-react-inputs
```

--------------------------------

### Install React Lists Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/lists/README.md

Install the ej2-react-lists package and its dependencies using npm.

```sh
npm install @syncfusion/ej2-react-lists
```

--------------------------------

### Render Syncfusion Kanban Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/kanban/README.md

Integrate the KanbanComponent into your React application. This example demonstrates basic setup with data binding, key field, and column definitions.

```typescript
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import * as React from 'react';
import './App.css';

function App() {
    let data = [
        { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.', Type: 'Story', Priority: 'Low', Tags: 'Analyze,Customer', Estimate: 3.5, Assignee: 'Nancy Davloio', RankId: 1 },
        { Id: 2, Status: 'InProgress', Summary: 'Fix the issues reported in the IE browser.', Type: 'Bug', Priority: 'Release Breaker', Tags: 'IE', Estimate: 2.5, Assignee: 'Janet Leverling', RankId: 2  },
        { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported by the customer.', Type: 'Bug', Priority: 'Low', Tags: 'Customer', Estimate: '3.5', Assignee: 'Steven walker', RankId: 1 },
        { Id: 4, Status: 'Close', Summary: 'Arrange a web meeting with the customer to get the login page requirements.', Type: 'Others', Priority: 'Low', Tags: 'Meeting', Estimate: 2, Assignee: 'Michael Suyama', RankId: 1 },
        { Id: 5, Status: 'Validate', Summary: 'Validate new requirements', Type: 'Improvement', Priority: 'Low', Tags: 'Validation', Estimate: 1.5, Assignee: 'Robert King', RankId: 1 }
    ];
    return (
            <div className="App">
                <KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
                    <ColumnsDirective>
                    <ColumnDirective headerText="To Do" keyField="Open"/>
                    <ColumnDirective headerText="In Progress" keyField="InProgress"/>
                    <ColumnDirective headerText="Testing" keyField="Testing"/>
                    <ColumnDirective headerText="Done" keyField="Close"/>
                    </ColumnsDirective>
                </KanbanComponent>
            </div>
          );
};
export default App;
```

--------------------------------

### Install React In-place Editor

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/inplaceeditor/README.md

Install the In-place Editor component and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-inplace-editor
```

--------------------------------

### Install SplitButtons Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/splitbuttons/README.md

Use npm to install the SplitButtons package and its dependencies.

```sh
npm install @syncfusion/ej2-react-splitbuttons
```

--------------------------------

### Install React Query Builder Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/querybuilder/README.md

Install the Syncfusion React Query Builder package using npm.

```bash
npm install @syncfusion/ej2-react-querybuilder --save
```

--------------------------------

### Install Interactive Chat Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/interactivechat/README.md

Use this command to install the @syncfusion/ej2-react-interactive-chat package and its dependencies.

```sh
npm install @syncfusion/ej2-react-interactive-chat
```

--------------------------------

### Features Section Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

An example demonstrating how to document features for a control, including the required ID format and the use of escape sequences for the '#' symbol.

```markdown
### Features
{:#ejaccordion-features}

* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303, #140304 - Accordion provides option to add new items dynamically by using the `addItem` method
```

--------------------------------

### Install React HeatMap Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/heatmap/README.md

Command to install the Syncfusion React HeatMap package using npm.

```sh
npm install @syncfusion/ej2-react-heatmap --save
```

--------------------------------

### Release Notes Formatting Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

Demonstrates the markdown format for release notes, including bug fixes and issue tracking identifiers.

```markdown
## ChromelessWindow

### Bug Fixes
{:#chromelesswindow-bug-fixes}

* #I336220 - When using `ShowDialog` on a `RibbonWindow`, a `NullReferenceException` will no longer occur.
* #F166385 - The gap between the bottom of the window and the `TaskBar` is now properly maintained.

```

--------------------------------

### Breaking Changes Section Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

An example illustrating how to document breaking changes, including the required ID format and the structure for listing each change.

```markdown
### Breaking Changes
{:#ejaccordion-breaking-changes}

* Now, Circular series end angle will not be adjusted based on the start angle, so the output will be like semi-circle instead of full circle. In order to render the complete circular series with customized start angle, you have to add the start angle value to end angle property now. This break will occur only if you have specified startAngle already 
```

--------------------------------

### Install Schedule Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/schedule/README.md

Install the Syncfusion React Schedule component and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-schedule
```

--------------------------------

### Install Notifications Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/notifications/README.md

Install the Syncfusion React Notifications component and its dependencies using npm.

```sh
npm install @syncfusion/ej2-react-notifications
```

--------------------------------

### Install React Ribbon Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/ribbon/README.md

Install the Ribbon component and its dependent packages using npm. This command saves the packages to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-ribbon --save
```

--------------------------------

### Install Syncfusion React Document Editor Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/README.md

Install the Syncfusion React Document Editor package from npm.

```bash
npm install @syncfusion/ej2-react-documenteditor --save
```

--------------------------------

### Install Syncfusion Kanban Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/kanban/README.md

Install the Syncfusion Kanban component and its dependencies using npm. This command adds the necessary package to your project's node_modules folder.

```bash
npm install @syncfusion/ej2-react-kanban --save
```

--------------------------------

### Install React Block Editor Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/blockeditor/README.md

Install the Block Editor package using npm. This is the first step to integrate the editor into your React application.

```sh
npm install @syncfusion/ej2-react-blockeditor
```

--------------------------------

### Create React Application with Vite

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/richtexteditor/README.md

Scaffold a new React + TypeScript project using Vite, navigate into the project directory, and start the development server.

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
```

--------------------------------

### Install Syncfusion React Grid Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/grids/README.md

Install the Syncfusion React Grid package from npm. This command adds the necessary grid components and their dependencies to your project.

```bash
npm install @syncfusion/ej2-react-grids --save
```

--------------------------------

### Install Syncfusion Gantt Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/gantt/README.md

Install the Syncfusion React Gantt package using npm. This command adds the Gantt component to your project dependencies.

```bash
npm install @syncfusion/ej2-react-gantt --save
```

--------------------------------

### Install Syncfusion Pivot Table Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pivotview/README.md

Install the Syncfusion React Pivot Table package from npm. This command adds the necessary component files to your project.

```bash
npm install @syncfusion/ej2-react-pivotview --save
```

--------------------------------

### Install Syncfusion Barcode Generator Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/barcodegenerator/README.md

Command to install the Syncfusion React Barcode Generator package from npm.

```bash
npm install @syncfusion/ej2-react-barcode-generator --save
```

--------------------------------

### Install Syncfusion React Spreadsheet Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/spreadsheet/README.md

Install the Syncfusion React Spreadsheet package using npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-spreadsheet --save
```

--------------------------------

### Install Syncfusion React Diagram Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/diagrams/README.md

Install the Syncfusion React Diagram package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-diagrams --save
```

--------------------------------

### Install Syncfusion React PDF Viewer Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pdfviewer/README.md

Install the Syncfusion React PDF Viewer package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-pdfviewer --save
```

--------------------------------

### Install Syncfusion React Chart Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/charts/README.md

Install the necessary Syncfusion React Chart package from npm. This command adds the chart package as a dependency to your project.

```bash
npm install @syncfusion/ej2-react-charts --save
```

--------------------------------

### Install Syncfusion React TreeGrid Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treegrid/README.md

Install the Syncfusion React TreeGrid package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-treegrid --save
```

--------------------------------

### Install Syncfusion React Maps Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/maps/README.md

Install the Syncfusion React Maps package from npm. This command adds the necessary library to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-maps --save
```

--------------------------------

### Bug Fixes Section Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

An example of documenting bug fixes for a control, adhering to the specified ID format and list structure. Note the use of escape sequences for '#'.

```markdown
### Bug Fixes
{:#ejaccordion-bug-fixes}

* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303, #140304 - Accordion provides option to add new items dynamically by using the `addItem` method
```

--------------------------------

### Install Syncfusion TreeMap Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treemap/README.md

Install the Syncfusion React TreeMap package from npm. This command adds the necessary library to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-treemap --save
```

--------------------------------

### Install Syncfusion FileManager Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/filemanager/README.md

Install the Syncfusion React FileManager package using npm. This command adds the necessary files to your project's node_modules directory.

```bash
npm install @syncfusion/ej2-react-filemanager --save
```

--------------------------------

### Install Syncfusion React Image Editor Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/imageeditor/README.md

Install the Syncfusion React Image Editor package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-image-editor --save
```

--------------------------------

### Install Rich Text Editor Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/richtexteditor/README.md

Install the Syncfusion Rich Text Editor package and its dependencies using npm. This adds the package to your project's package.json.

```bash
npm install @syncfusion/ej2-react-richtexteditor --save
```

--------------------------------

### Add HeatMap Component to App

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/heatmap/README.md

Basic example of how to import and render the Syncfusion React HeatMap component in an App.tsx file. It includes sample data for the heatmap.

```typescript
import { React } from 'react';
import { HeatMapComponent } from '@syncfusion/ej2-react-heatmap';
function App() {
    let heatmapData: any[] = [
        [73, 39, 26, 39, 94, 0],
        [93, 58, 53, 38, 26, 68],
        [99, 28, 22, 4, 66, 90],
        [14, 26, 97, 69, 69, 3],
        [7, 46, 47, 47, 88, 6],
        [41, 55, 73, 23, 3, 79],
        [56, 69, 21, 86, 3, 33],
        [45, 7, 53, 81, 95, 79],
        [60, 77, 74, 68, 88, 51],
        [25, 25, 10, 12, 78, 14],
        [25, 56, 55, 58, 12, 82],
        [74, 33, 88, 23, 86, 59]];
   return (<HeatMapComponent dataSource={heatmapData}></HeatMapComponent>);
}
export default App;
```

--------------------------------

### Add Syncfusion Spreadsheet CSS References

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/spreadsheet/README.md

Import the required Syncfusion Material theme CSS files into your App.css. Ensure these paths correctly point to the installed node modules.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';
```

--------------------------------

### Add CSS References for Diagram

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/diagrams/README.md

Import the required CSS styles for the Syncfusion Diagram component into your App.css file. Ensure the paths correctly point to the installed node modules.

```css
@import "../node_modules/@syncfusion/ej2-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
```

--------------------------------

### Render Syncfusion React Diagram Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/diagrams/README.md

Render the Syncfusion React Diagram component in your App.tsx file. This example initializes a diagram with predefined nodes and connectors.

```typescript
import { ConnectorModel, DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
import * as React from 'react';
import './App.css';

//Initializes the nodes for the diagram
let nodes: NodeModel[] = [
  {
    id: "begin",
    height: 60,
    offsetX: 300,
    offsetY: 80,
    shape: { type: "Flow", shape: "Terminator" },
    annotations: [
      {
        content: "Begin"
      }
    ]
  },
  {
    id: "process",
    height: 60,
    offsetX: 300,
    offsetY: 160,
    shape: { type: "Flow", shape: "Decision" },
    annotations: [
      {
        content: "Process"
      }
    ]
  },
  {
    id: "end",
    height: 60,
    offsetX: 300,
    offsetY: 240,
    shape: { type: "Flow", shape: "Process" },
    annotations: [
      {
        content: "End"
      }
    ]
  },
];
//Initializes the connector for the diagram
let connectors: ConnectorModel[] = [
  { id: "connector1", sourceID: "begin", targetID: "process" },
  { id: "connector2", sourceID: "process", targetID: "end" },
];

function App() {
    return <DiagramComponent id="container" width={"100%"} height={"350px"} nodes={nodes} connectors={connectors}></DiagramComponent>
};
export default App;
```

--------------------------------

### Render Syncfusion React PDF Viewer Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pdfviewer/README.md

Render the Syncfusion React PDF Viewer component in your application. This example shows how to import necessary modules and configure the viewer with a document and service URL.

```typescript
import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch,
  Annotation,
  FormFields,
  FormDesigner,
  Inject,
} from '@syncfusion/ej2-react-pdfviewer';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
  render() {
    return (
      <div>
        <div className="control-section">
          <PdfViewerComponent
            id="container"
            documentPath="PDF_Succinctly.pdf"
            serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
            toolbarSettings={{ showTooltip: true, toolbarItems: ['OpenOption',  'PanTool', 'AnnotationEditTool', 'FormDesignerEditTool', ], annotationToolbarItems: ['HandWrittenSignatureTool'], formDesignerToolbarItems: ['TextboxTool', 'PasswordTool', ] }}
            style={{ height: '640px' }}
          >
            <Inject
              services={[
                Toolbar,
                Magnification,
                Navigation,
                LinkAnnotation,
                BookmarkView,
                ThumbnailView,
                Print,
                TextSelection,
                TextSearch,
                Annotation,
                FormFields,
                FormDesigner,
              ]}
            />
          </PdfViewerComponent>
        </div>
      </div>
    );
  }
}

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
```

--------------------------------

### Render Syncfusion React Grid Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/grids/README.md

Integrate the Syncfusion React Grid component into your application by importing necessary modules and defining columns. This example shows a basic grid with predefined data and columns.

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

function App() {
    let data = [
        {'OrderID': 10248,'CustomerID': 'VINET', 'ShipCountry': 'France'},
        {'OrderID': 10249,'CustomerID': 'TOMSP', 'ShipCountry': 'Germany'},
        {'OrderID': 10250,'CustomerID': 'HANAR', 'ShipCountry': 'Brazil' },
        {'OrderID': 10251,'CustomerID': 'VICTE', 'ShipCountry': 'France'}
        ];
        
    return <GridComponent dataSource={data}>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID'/>
            <ColumnDirective field='CustomerID' headerText='Customer ID' />
            <ColumnDirective field='ShipCountry' headerText='Ship Country' />
        </ColumnsDirective>
    </GridComponent>
};
export default App;
```

--------------------------------

### Add Syncfusion Linear Gauge Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/lineargauge/README.md

Install the Syncfusion React Linear Gauge package using npm. This command adds the necessary library to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-lineargauge --save
```

--------------------------------

### Render Basic Linear Gauge Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/lineargauge/README.md

Import and render the Syncfusion React Linear Gauge component in your App.tsx file. This is the basic setup to display the component.

```typescript
import React from 'react';
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';

function App() {
  return (<LinearGaugeComponent></LinearGaugeComponent>);
}
export default App;
```

--------------------------------

### Render Basic React TreeGrid Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treegrid/README.md

Render the Syncfusion React TreeGrid component in your application. This example demonstrates binding hierarchical data and defining columns.

```typescript
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';

function App() {
    let data = [
      {
          taskID: 1,
          taskName: 'Planning',
          startDate: new Date('02/03/2017'),
          duration: 5,
          subtasks: [
              { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), duration: 5 },
              { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), duration: 5 },
              { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), duration: 5 },
              { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), duration: 0 }
          ]
      }];
        
    return <TreeGridComponent dataSource={data} treeColumnIndex={1} childMapping= 'subtasks'>
                <ColumnsDirective>
                    <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
                    <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
                    <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
                    <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
                </ColumnsDirective>
            </TreeGridComponent>
};
export default App;
```

--------------------------------

### Add Syncfusion Circular Gauge Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/circulargauge/README.md

Install the Syncfusion React Circular Gauge package from npm. This command adds the necessary library to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-circulargauge --save
```

--------------------------------

### Render Syncfusion React Gantt Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/gantt/README.md

Render the Syncfusion React Gantt component in your App.tsx file. This example demonstrates how to provide data and configure task fields for the Gantt chart.

```typescript
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import './App.css';

function App() {
    let data = [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
            ]
        }];
    let taskSettings = {id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', duration: 'Duration', progress: 'Progress', child: 'subtasks' };
        
    return  <GanttComponent dataSource={data} treeColumnIndex={1} taskFields={taskSettings}></GanttComponent>
};
export default App;
```

--------------------------------

### Add Syncfusion Barcode Component to React App

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/barcodegenerator/README.md

Example of how to render the Syncfusion Barcode Generator component in a React application's App.tsx file. Ensure necessary imports are included.

```typescript
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
import * as React from 'react';
import './App.css';

function App() {
    return <BarcodeGeneratorComponent
              id="barcode"
              width={'200px'}
              height={'150px'}
              type="Ean8"
              value="11223344"></BarcodeGeneratorComponent>
};
export default App;
```

--------------------------------

### Add Syncfusion TreeMap Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treemap/README.md

Integrate the Syncfusion React TreeMap component into your App.tsx file. This example demonstrates how to provide data and configure basic treemap properties like height, data source, weight value path, and leaf item label path.

```typescript
import { React } from 'react';
import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
function App() {
    let data: any = [
    { State: 'Brazil', Count: 25 },
    { State: 'Colombia', Count: 12 },
    { State: 'Argentina', Count: 9 },
    { State: 'Ecuador', Count: 7 },
    { State: 'Chile', Count: 6 },
    { State: 'Peru', Count: 3 },
    { State: 'Venezuela', Count: 3 },
    { State: 'Bolivia', Count: 2 },
    { State: 'Paraguay', Count: 2 },
    { State: 'Uruguay', Count: 2 },
    { State: 'Falkland Islands',Count: 1 },
    { State: 'French Guiana', Count:1 },
    { State: 'Guyana', Count: 1 },
    { State: 'Suriname', Count: 1 },
  ];
   return (<TreeMapComponent height='350px' dataSource={data} weightValuePath='Count' 
     leafItemSettings={{ labelPath: 'State' }}></TreeMapComponent>);
}
export default App;
```

--------------------------------

### Create React App with TypeScript

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/barcodegenerator/README.md

Command to create a new React application using create-react-app with the TypeScript template.

```bash
npx create-react-app my-app --template typescript
cd my-app
npm start
```

--------------------------------

### Add CSS References for Image Editor

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/imageeditor/README.md

Import the required CSS styles for the Image Editor and its dependencies into your main CSS file (e.g., src/App.css). Ensure the paths correctly point to the node_modules directory.

```css
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/bootstrap5.css";
```

--------------------------------

### Add Kanban CSS References

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/kanban/README.md

Import the required Syncfusion Kanban CSS styles into your main CSS file (e.g., App.css). Ensure the paths correctly point to the styles within the node_modules directory.

```css
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
    @import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
    @import "../node_modules/@syncfusion/ej2-layouts/styles/bootstrap5.css";
    @import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
    @import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
    @import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
    @import "../node_modules/@syncfusion/ej2-react-kanban/styles/bootstrap5.css";
```

--------------------------------

### Add Schedule CSS References

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/schedule/README.md

Include the necessary CSS styles for the Schedule component and its dependencies in your main CSS file.

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

--------------------------------

### Add Syncfusion Grid CSS References

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/grids/README.md

Import the required Syncfusion CSS styles into your main CSS file (e.g., App.css). Ensure all necessary component styles are included for proper rendering.

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

--------------------------------

### Add CSS References for Query Builder

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/querybuilder/README.md

Import necessary Syncfusion CSS styles into your App.css file for the Query Builder component.

```css
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
@import "../node_modules/@syncfusion/ej2-querybuilder/styles/bootstrap5.css";
```

--------------------------------

### Control Name Syntax

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

Use '##' for control names, which renders as an H2 header. This is the standard for identifying the component in release notes.

```markdown
## <Control-Name>
```

--------------------------------

### Add Pivot Table CSS References

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pivotview/README.md

Import the required Syncfusion component styles into your main CSS file (e.g., App.css). Ensure the paths correctly point to the styles within the node_modules directory.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/material.css';
```

--------------------------------

### Add CSS References for Gantt

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/gantt/README.md

Include the necessary Syncfusion CSS styles in your App.css file. These imports ensure the Gantt component is styled correctly.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-gantt/styles/material.css';
```

--------------------------------

### Add CSS References for Document Editor

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/README.md

Include the required Syncfusion component CSS styles in your App.css file for proper rendering.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css";
```

--------------------------------

### Integrate Document Editor Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/README.md

Add the DocumentEditorContainerComponent to your React application and inject the Toolbar service. Ensure the serviceUrl points to your deployed web API.

```typescript
import * as React from 'react';
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
    return (<DocumentEditorContainerComponent id="container" style={{ 'height': '590px' }} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true}/>);
}
export default App;
```

--------------------------------

### Features Section Syntax

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

Format the Features section with an H3 header and an ID for linking. Features are listed as an unordered list, with each item prefixed by '#'. Use escape sequences for '#' if it needs to be displayed literally.

```markdown
### Features
{:#<control-name>-features}

* #1 - Feature Info
* #2 - Feature Info
* #3 - Feature Info
```

--------------------------------

### Add CSS References for FileManager

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/filemanager/README.md

Import the required Syncfusion CSS styles into your App.css file. These styles ensure the FileManager component is displayed correctly with the chosen theme (bootstrap5 in this case).

```css
@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/bootstrap5.css';
@import "../node_modules/@syncfusion/ej2-react-filemanager/styles/bootstrap5.css";
```

--------------------------------

### Add CSS References for PDF Viewer

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pdfviewer/README.md

Include the required Syncfusion CSS styles in your main CSS file (e.g., src/index.css). These imports ensure the PDF Viewer component is styled correctly.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';  
@import "../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material.css";
```

--------------------------------

### Add Rich Text Editor CSS References

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/richtexteditor/README.md

Include the necessary CSS files for the Rich Text Editor and its dependencies in your main CSS file (e.g., src/App.css).

```css
@import '../../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
@import '../../node_modules/@syncfusion/ej2-richtexteditor/styles/bootstrap5.css';
```

--------------------------------

### Add CSS References for Tree Grid

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treegrid/README.md

Import the required CSS styles for the Syncfusion Tree Grid component into your main CSS file. Ensure these paths are correct relative to your project structure.

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

--------------------------------

### Render React Query Builder Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/querybuilder/README.md

Import and render the Syncfusion React Query Builder component in your App.tsx file, providing column definitions.

```typescript
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import './App.css';
function App() {
    let columnData = [
    { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' },
    { field: 'City', label: 'City', type: 'string' }
];

return (<div className="control-section">
            <QueryBuilderComponent width='100%' columns={columnData} ></QueryBuilderComponent>
        </div>);
};
export default App;
```

--------------------------------

### Inject Schedule Modules

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/schedule/README.md

Use the Inject component to register the required view modules for the Schedule component.

```typescript
<Inject services={[Day, Week, WorkWeek, Month, Agenda, MonthAgenda, TimelineViews, TimelineMonth ]} />
```

--------------------------------

### Render Syncfusion Pivot Table Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pivotview/README.md

Render the PivotViewComponent in your React application by importing it and configuring its data source settings. This includes defining rows, columns, values, and format settings.

```typescript
import { IDataSet, IDataOptions, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import './App.css';

export default function App() {
    let pivotData: IDataSet[] = [
        { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
        { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
        { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
        { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
        { 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' }
    ];
    let dataSourceSettings: IDataOptions = {
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        dataSource: pivotData,
        expandAll: false,
        filters: [],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
    };
    return <PivotViewComponent id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings}></PivotViewComponent>
}
```

--------------------------------

### Render Syncfusion React Spreadsheet Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/spreadsheet/README.md

Render the Syncfusion React Spreadsheet component in your App.tsx file. Import necessary modules and apply styles by importing App.css.

```typescript
import { SheetsDirective, SheetDirective, RangesDirective, RangeDirective, SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import * as React from 'react';
import './App.css';

export default function App() {
    let data: object[] = [
        { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCity: 'Reims' },
        { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCity: 'Münster' },
        { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCity: 'Lyon' }
    ];
    return <SpreadsheetComponent>
               <SheetsDirective>
                   <SheetDirective>
                       <RangesDirective>
                            <RangeDirective dataSource={data}></RangeDirective>
                        </RangesDirective>
                    </SheetDirective>
                </SheetsDirective>
           </SpreadsheetComponent>
}
```

--------------------------------

### Render Schedule Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/schedule/README.md

Render the Syncfusion React Schedule component in your application, providing event data and selected date.

```typescript
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import * as React from 'react';
import './App.css';
function App() {
  const data = [
    {
      Id: 1,
      Subject: 'Meeting',
      StartTime: new Date(2023, 1, 15, 10, 0),
      EndTime: new Date(2023, 1, 15, 12, 30),
    },
  ];
  return (
    <ScheduleComponent
      selectedDate={new Date(2023, 1, 15)}
      eventSettings={{
        dataSource: data,
      }}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
}
export default App;
```

--------------------------------

### Render Rich Text Editor Component with Modules

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/richtexteditor/README.md

Render the Syncfusion Rich Text Editor component in your React application and inject the required services like Toolbar, Image, Link, HtmlEditor, and QuickToolbar using the Inject directive.

```typescript
import * as React from 'react';
import './App.css';
import {
  HtmlEditor,
  Image,
  Inject,
  Link,
  QuickToolbar,
  RichTextEditorComponent,
  Toolbar
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  return (
    <div className="App">
      <RichTextEditorComponent>
        <p>Start editing your content here.</p>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;
```

--------------------------------

### Bug Fixes Section Syntax

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

Structure the Bug Fixes section with an H3 header and a specific ID format. Bug fixes are listed as an unordered list, with each item prefixed by '#'.

```markdown
### Bug fixes
{:#<control-name-in-lower-case>-bug-fixes}

* #1 - Bug Fix
* #2 - Bug Fix
* #3 - Bug Fix
```
Tokens:
Raw