Syncfusion React UI Components

https://ej2.syncfusion.com/react/documentation/
Admin
Syncfusion React UI Components (Essential JS 2) is a modern UI components library built to be...
Tokens:7,735,417
Snippets:59,898
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Run the Application with npm run start

Source: https://ej2.syncfusion.com/react/documentation/form-validator/react-functional-component

Starts the application in the browser. Run this command from the project root after installing dependencies.

```bash
npm run start

```

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

### Next.js setup project name prompt

Source: https://ej2.syncfusion.com/react/documentation/grid/nextjs-getting-started

Example response to the project name prompt during Next.js setup. Specify the project name as ej2-nextjs-grid.

```text
√ What is your project named? » ej2-nextjs-grid
```

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

### Install selected Syncfusion React skills interactively

Source: https://ej2.syncfusion.com/react/documentation/skills

Starts an interactive installation of Syncfusion React skills. Use arrow keys to navigate, space bar to select, and Enter to confirm.

```bash
npx skills add syncfusion/react-ui-components-skills
```

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

### Navigate and install dependencies

Source: https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started

After creating the project, navigate into the project directory and install the required dependencies.

```bash
cd my-app
npm install
```

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

### Install Material 3 theme with yarn

Source: https://ej2.syncfusion.com/react/documentation/form-builder

Install the Syncfusion Material 3 theme package using yarn. This theme is used as an example in the guide.

```bash
yarn add @syncfusion/ej2-material3-theme
```

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

### Create React Vite project interactively with Syncfusion CLI

Source: https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started

Interactive mode guides you through project creation with step-by-step prompts. Running `sf` starts the CLI, and the shown selections generate a React Vite application with the Rich Text Editor component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your requirements.

```bash
sf
```

```text
√ Project name? ... my-app
√ Choose Framework: » React
√ Choose Build Tool: » Vite
√ Choose Language: » Typescript
√ Choose Template: » Rich Text Editor
√ Choose Theme: » Tailwind3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
√ Install dependencies and start app now? ... no
```

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

### Add component examples for all supported components

Source: https://ej2.syncfusion.com/react/documentation/common/syncfusion-cli

Examples of the `add` command for each supported Syncfusion component.

```CMD
sf add grid
sf add chart
sf add scheduler
sf add gantt
sf add filemanager
sf add diagram
sf add rich-text-editor
sf add pdf-viewer
sf add docx-editor
sf add spreadsheet-editor
```

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

### Run the React project

Source: https://ej2.syncfusion.com/react/documentation/document-editor/getting-started

Navigate to the project directory and install dependencies, then start the development server. The output will appear after running these commands.

```bash
cd syncfusion-react-app
npm install
npm run dev
```

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

### Add React Speed Dial component in App.jsx

Source: https://ej2.syncfusion.com/react/documentation/speed-dial/getting-started

Add the React Speed Dial component to your src/App.jsx file by importing SpeedDialComponent from '@syncfusion/ej2-react-buttons' and rendering it with the id 'speeddial'. This is the minimal setup to get started.

```js
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import { createRoot } from 'react-dom/client';
import './App.css';

function App() {
    return (
        <SpeedDialComponent id='speeddial'></SpeedDialComponent>
    );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);
```

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

### Toolbar item click event setup (partial)

Source: https://ej2.syncfusion.com/react/documentation/chat-ui/messages

Starts the example for the `itemClicked` event. Imports the required Syncfusion Chat UI components and types, and defines the two user models used in the conversation. The code is incomplete as shown in the source.

```jsx
import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel, MessageToolbarSettingsModel, MessageToolbarItemClickedEventArgs, MessageModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { useRef } from 'react';

function App() {
    const currentUserModel = {
        id: "user1",
        user: "Albert"
    };

    const michaleUserModel = {
        id: "user2",
        user: "Michale Suyama"
    };
```

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

### Run the generated Chart project

Source: https://ej2.syncfusion.com/react/documentation/chart/getting-started.md

Navigates to the project directory, installs dependencies, and starts the development server. The output appears as a chart component.

```bash
cd my-chart-app
npm install
npm run dev
```

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

### Sample JSON order data array

Source: https://ej2.syncfusion.com/react/documentation/data/getting-started

Provides a sample JSON array of order records with fields like OrderID, CustomerID, EmployeeID, OrderDate, and shipping details. Used as the data source for binding to a Syncfusion Grid in the getting started example.

```typescript
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];
```

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

### React Dropdown Tree getting started example (app.jsx, app.tsx, index.html)

Source: https://ej2.syncfusion.com/react/documentation/drop-down-tree/getting-started

These files together form the getting-started example for the Syncfusion React Dropdown Tree component. The app.jsx/app.tsx files define the component with a hierarchical data source and render it into the 'sample' div, while index.html provides the HTML shell with the necessary Syncfusion Tailwind CSS styles and a loader element.

```jsx
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // definining the dataSource
    let data = [
        {
            nodeId: '01', nodeText: 'Music',
            nodeChild: [
                { nodeId: '01-01', nodeText: 'Gouttes.mp3' }
            ]
        },
        {
            nodeId: '02', nodeText: 'Videos', expanded: true,
            nodeChild: [
                { nodeId: '02-01', nodeText: 'Naturals.mp4' },
                { nodeId: '02-02', nodeText: 'Wild.mpeg' },
            ]
        },
        {
            nodeId: '03', nodeText: 'Documents',
            nodeChild: [
                { nodeId: '03-01', nodeText: 'Environment Pollution.docx' },
                { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx' },
                { nodeId: '03-03', nodeText: 'Global Warming.ppt' },
                { nodeId: '03-04', nodeText: 'Social Network.pdf' },
                { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf' },
            ]
        },
    ];
    let fields = { dataSource: data, value: 'nodeId', text: 'nodeText', child: 'nodeChild' };
    return (
        // specifies the tag for render the DropDownTree component
        <DropDownTreeComponent id="dropdowntree" fields={fields} />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

```tsx
import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // definining the dataSource
  let data: { [key: string]: Object }[] = [
    {
      nodeId: '01', nodeText: 'Music',
      nodeChild: [
        { nodeId: '01-01', nodeText: 'Gouttes.mp3' }
      ]
    },
    {
      nodeId: '02', nodeText: 'Videos', expanded: true,
      nodeChild: [
        { nodeId: '02-01', nodeText: 'Naturals.mp4' },
        { nodeId: '02-02', nodeText: 'Wild.mpeg' },
      ]
    },
    {
      nodeId: '03', nodeText: 'Documents',
      nodeChild: [
        { nodeId: '03-01', nodeText: 'Environment Pollution.docx' },
        { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx' },
        { nodeId: '03-03', nodeText: 'Global Warming.ppt' },
        { nodeId: '03-04', nodeText: 'Social Network.pdf' },
        { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf' },
      ]
    },
  ];
  let fields: Object = { dataSource: data, value: 'nodeId', text: 'nodeText', child: 'nodeChild' };
  return (
    // specifies the tag for render the DropDownTree component
    <DropDownTreeComponent id="dropdowntree" fields={fields} />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

```

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dropdown Tree</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

```

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

### Navigate to the project folder

Source: https://ej2.syncfusion.com/react/documentation/diagram/getting-started.md

Change into the newly created project directory before installing dependencies.

```bash
cd my-diagram-app
```

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

### Next.js setup configuration prompts and output

Source: https://ej2.syncfusion.com/react/documentation/circular-gauge/nextjs-getting-started

Example output showing the configuration prompts and final creation message when setting up a Next.js project. The project is created in the directory `D:\ej2-nextjs-circular-gauge`.

```text
√ What is your project named? ... ej2-nextjs-circular-gauge
√ Would you like to use TypeScript? ... No / `Yes`
√ Would you like to use ESLint? ... No / `Yes`
√ Would you like to use Tailwind CSS? ... `No` / Yes
√ Would you like to use `src/` directory? ... No / `Yes`
√ Would you like to use App Router? (recommended) ... No / `Yes`
√ Would you like to customize the default import alias? ... `No`/ Yes
Creating a new Next.js app in D:\ej2-nextjs-circular-gauge.
```

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

### Interactive mode selections for React File Manager app

Source: https://ej2.syncfusion.com/react/documentation/file-manager/getting-started

Example of the interactive prompts and selections when running the `sf` command. These choices generate a React Vite application with the File Manager component; you can change language, theme, style format, MCP setup, and skills installation as needed.

```bash

√ Project name? ... my-app
√ Choose Framework: » React
√ Choose Build Tool: » Vite
√ Choose Language: » JavaScript
√ Choose Template: » File Manager
√ Choose Theme: » Tailwind3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
√ Install dependencies and start app now? ... no

```

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

### React AppBar with Sidebar and TreeView

Source: https://ej2.syncfusion.com/react/documentation/appbar/design

This example creates a responsive sidebar with a treeview and an app bar. It uses Syncfusion EJ2 React components. The sidebar is initially open and toggles with a button in the app bar. The treeview data includes installation, deployment, quick start, and components with child items.

```tsx
import * as React from "react";
import { useState, useRef } from "react";
import * as ReactDOM from "react-dom";
import { AppBarComponent, TreeViewComponent, SidebarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

const App = () => {
  const [isOpen, setIsOpen] = useState<boolean>(true);
  const sidebarRef = useRef<SidebarComponent>(null);
  const data: { [key: string]: Object }[] = [
    {
      nodeId: '01', nodeText: 'Installation',
    },
    {
      nodeId: '02', nodeText: 'Deployment',
    },
    {
      nodeId: '03', nodeText: 'Quick Start',
    },
    {
      nodeId: '04', nodeText: 'Components',
      nodeChild: [
        { nodeId: '04-01', nodeText: 'Calendar' },
        { nodeId: '04-02', nodeText: 'DatePicker' },
        { nodeId: '04-03', nodeText: 'DateTimePicker' },
        { nodeId: '04-04', nodeText: 'DateRangePicker' },
        { nodeId: '04-05', nodeText: 'TimePicker' },
        { nodeId: '04-06', nodeText: 'SideBar' }
      ]
    }
  ];
  const width: string = '220px';
  const target: string = '.main-sidebar-content';
  const mediaQuery: string = '(min-width: 600px)';
  const fields: object = { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' };

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  }

  return (
    <div className="control-container" id="responsive-wrapper">
      <div id="reswrapper">
        <div>
          <AppBarComponent>
            <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu" onClick={toggleSidebar}></ButtonComponent>
            <div className="e-folder">
              <div className="e-folder-name">Navigation Pane</div>
            </div>
          </AppBarComponent>
        </div>
        <SidebarComponent id="sideTree" className="sidebar-treeview" ref={sidebarRef} width={width} target={target} mediaQuery={mediaQuery} isOpen={isOpen}>
          <div className='res-main-menu'>
            <div className="table-content">
              <TextBoxComponent id="resSearch" placeholder="Search..."></TextBoxComponent>
              <p className="main-menu-header">TABLE OF CONTENTS</p>
            </div>
            <div>
              <TreeViewComponent id='mainTree' cssClass="main-treeview" fields={fields} expandOn='Click' />
            </div>
          </div>
        </SidebarComponent>
        <div className="main-sidebar-content" id="main-text">
          <div className="sidebar-content">
            <div className="sidebar-heading"> Responsive Sidebar with Treeview</div>
            <p className="paragraph-content">
              This is a graphical aid for visualising and categorising the site, in the style of an expandable and collapsable treeview component.
              It auto-expands to display the node(s), if any, corresponding to the currently viewed title, highlighting that node(s)
              and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical browsers),
              falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered so that
              unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
              the treeview persists across page views in most situations.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
```

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

### Install Moment.js

Source: https://ej2.syncfusion.com/react/documentation/calendar/how-to/select-a-sequence-of-dates-in-calendar

Install Moment.js, a dependency for the calendar week-selection sample. Run this command in your project directory before using the sample.

```bash
npm install moment --save
```

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

### Run the Vite project with npm

Source: https://ej2.syncfusion.com/react/documentation/getting-started/vite

Navigate to the project directory and run these commands to install dependencies and start the development server.

```bash
cd my-project
npm install
npm run dev
```

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

### DateRangePicker value property example

Source: https://ej2.syncfusion.com/react/documentation/api/daterangepicker/daterangepickermodel

Example showing how to set the value property of the DateRangePickerComponent with start and end dates.

```tsx
import './App.css';
import * as React from 'react';
import { DateRangePickerComponent } from '@syncfusion/ej2-react-calendars';

class App extends React.Component {
  public value = [new Date(), new Date("12/12/2019")];
  public render() {
    return (<DateRangePickerComponent value={this.value} />);
  }
}

export default App;

```

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

### Initialize Django project and app

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/django-server-custom-binding

Creates a Django project named django_server and a new application module named library.

```bash
django-admin startproject django_server
python manage.py startapp library
```

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

### No Risers Example - TypeScript Imports and App Start

Source: https://ej2.syncfusion.com/react/documentation/chart/chart-types/stacked-step-area

Starts the TypeScript example for the 'No risers' customization. It imports the necessary chart components and the percentData datasource, and begins the App component definition. The code is incomplete as shown in the source.

```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, StackingStepAreaSeries}
from'@syncfusion/ej2-react-charts';
import { percentData } from "../datasource";

function App() {
```

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

### Select packages prompt

Source: https://ej2.syncfusion.com/react/documentation/file-manager/nextjs-getting-started

Example prompt output for selecting recommended Next.js defaults (TypeScript, ESLint, Tailwind CSS, App Router).

```text
√ What is your project named? ... ej2-nextjs-file-manager
? Would you like to use the recommended Next.js defaults?
>   Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router
    No, reuse previous settings
    No, customize settings
```

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

### Install @syncfusion/ej2-tailwind3-theme

Source: https://ej2.syncfusion.com/react/documentation/appbar/getting-started

Installs the Tailwind 3 theme package for Syncfusion components. This theme is used in the guide to style the AppBar.

```bash
npm install @syncfusion/ej2-tailwind3-theme
```

```bash
yarn add @syncfusion/ej2-tailwind3-theme
```

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

### Start the GraphQL server

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/graphql-nodejs-server

Starts the GraphQL server. Run this command from the terminal or Command Prompt before starting the client. The server runs at http://localhost:4205/.

```bash
cd GraphQLServer
npm start
```

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

### Navigate to project directory

Source: https://ej2.syncfusion.com/react/documentation/file-manager/nextjs-getting-started

Command to change into the created project directory.

```bash
cd ej2-nextjs-file-manager
```

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

### getStartEndHours

Source: https://ej2.syncfusion.com/react/documentation/api/schedule/staticfunctions

Method to get start and end hours.

```APIDOC
## getStartEndHours

### Description
Method to get start and end hours.

### Method
Function

### Parameters
- **date** (`Date`) - Required - Accepts the date object
- **startHour** (`Date`) - Required - Accepts the start hour date object
- **endHour** (`Date`) - Required - Accepts the end hour date object

### Returns
`Record`
```

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

### Preview production build with npm run preview

Source: https://ej2.syncfusion.com/react/documentation/ai-assistview/getting-started

Preview the production build locally.

```bash
npm run preview
```

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

### Define project name in Next.js setup

Source: https://ej2.syncfusion.com/react/documentation/circular-gauge/nextjs-getting-started

Example output when defining the project name during Next.js setup. The project name is specified as `ej2-nextjs-circular-gauge`.

```text
√ What is your project named? » ej2-nextjs-circular-gauge
```

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

### HTML setup for Kanban tooltip template

Source: https://ej2.syncfusion.com/react/documentation/diagram/tooltip

HTML structure for the Kanban tooltip template example. Includes Syncfusion stylesheets, SystemJS scripts, a loader style, and a container div with id 'kanban'.

```html
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-react-kanban/styles/tailwind3.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>
</head>

<body>
    <div id='kanban'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
```

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

### Set tipPointerPosition to Start in React Tooltip (index.tsx)

Source: https://ej2.syncfusion.com/react/documentation/tooltip/position

TypeScript version of the example that sets the tooltip pointer to the Start position using the tipPointerPosition property.

```tsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
    return (
        <TooltipComponent className="tooltip-box" content='Tooltip Content' tipPointerPosition='Start' target='#target'>
            <button className="e-btn" id='target'>Show Tooltip</button>
        </TooltipComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
```

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

### Set up React app in JavaScript environment

Source: https://ej2.syncfusion.com/react/documentation/barcode/getting-started

Sets up a React application in a JavaScript environment. After creating the app, navigate into the project directory and start the development server.

```bash
npm create vite@latest my-app -- --template react
cd my-app
npm run dev
```
Tokens:
Raw