-
-
- 2026 Volume 2 - 34.* +
- 2026 Volume 2 - 34.*
- Weekly Release
- 34.1.29 Main Release
- 2026 Volume 1 - 33.*
- Weekly Release
diff --git a/ej2-react/3d-chart/appearance.md b/ej2-react/3d-chart/appearance.md
index 5e64623fd4..6e7d1d0aab 100644
--- a/ej2-react/3d-chart/appearance.md
+++ b/ej2-react/3d-chart/appearance.md
@@ -127,18 +127,18 @@ The 3D chart can be rotated by using the [`enableRotation`](https://helpej2.sync
## Title
-The 3D chart can be given a title by using [`title`](https://helpej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property, to show the information about the data plotted.
+You can add a title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/3d-chart/appearance/appearance-cs8/app/index.jsx %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/3d-chart/appearance/appearance-cs8/app/index.tsx %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.tsx %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/3d-chart/appearance/appearance-cs8" %}
+{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs3" %}
### Title position
diff --git a/ej2-react/3d-chart/getting-started.md b/ej2-react/3d-chart/getting-started.md
index 4585e29ba7..05009b7a86 100644
--- a/ej2-react/3d-chart/getting-started.md
+++ b/ej2-react/3d-chart/getting-started.md
@@ -1,8 +1,8 @@
---
layout: post
title: Getting started with React 3D Chart component | Syncfusion
-description: Checkout and learn about Getting started with React 3D Chart component of Syncfusion Essential JS 2 and more details.
-control: Getting started
+description: Check out and learn about the Getting started with the React 3D Chart component of Syncfusion Essential JS 2 and more details.
+control: Getting started
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
@@ -10,15 +10,19 @@ domainurl: ##DomainURL##
# Getting started with React 3D Chart component
-This section describes the steps to create a simple 3D Chart and demonstrates the basic usage of the 3D Chart component.
+This section describes the steps to create a simple 3D Chart component and demonstrates its basic usage.
A quick video overview of the React 3D Charts setup is available:
{% youtube "https://www.youtube.com/watch?v=S3SPJYF4Fw8" %}
+## Prerequisites
+
+Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement). That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.
+
## Dependencies
-Below is the list of minimum dependencies required to use the 3D Chart component.
+When you install `@syncfusion/ej2-react-charts`, the following dependent packages are installed automatically:
```
|-- @syncfusion/ej2-react-charts
@@ -30,89 +34,55 @@ Below is the list of minimum dependencies required to use the 3D Chart component
|-- @syncfusion/ej2-svg-base
```
-Once you install `@syncfusion/ej2-react-charts`, the other required dependencies will be installed automatically along with the main package.
+## Set up a development environment
-## Installation and configuration
+To set up a React application quickly, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up the environment using JavaScript and optimizes applications for production.
-### Create a React application
+> As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app). For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
-To easily set up a React application, use the Vite CLI (`npm create vite`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like [`create-react-app`](https://github.com/facebook/create-react-app). For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+To create a new React application, run one of the following commands based on your preferred language:
-> **Note:** To create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+**React with JavaScript**
-To create a new React application, run the following command.
+```
+npm create vite@latest my-app -- --template react
+```
+
+**React with TypeScript**
-```bash
-npm create vite@latest my-app
+```
+npm create vite@latest my-app -- --template react-ts
```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+During the setup process, the CLI will prompt you for a few configuration options. Select the following:
-
+- **Which linter to use?** → **ESLint**
+- **Install with npm and start now?** → **Yes**
-To set up a React application in TypeScript environment, run the following command.
+Selecting **Yes** automatically installs the project dependencies and starts the development server.
-```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
-```
+After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.
-To set up a React application in JavaScript environment, run the following command.
+Then, navigate to the project directory:
-```bash
-npm create vite@latest my-app -- --template react
+```
cd my-app
-npm run dev
```
-### Install Syncfusion® 3D Chart package
+## Install the Syncfusion® React 3D Chart package
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
+All Syncfusion Essential® JS 2 packages are published to the [npm registry](https://www.npmjs.com/~syncfusionorg).
-To install the Syncfusion® 3D Chart package, use the following command
+Install the React 3D Chart package using the following command:
```bash
-npm install @syncfusion/ej2-react-charts --save
+npm install @syncfusion/ej2-react-charts
```
-> The –save will instruct NPM to include the 3D Chart package inside of the **dependencies** section of the package.json.
-
-## Add 3D Chart to the project
+## Add the 3D Chart component to the project
Add the 3D Chart component to `src/App.tsx` using the following code.
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-
-import { Chart3DComponent } from '@syncfusion/ej2-react-charts';
-import * as React from 'react';
-function App() {
- return (
); -} -export default App; - -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} - -import { Chart3DComponent } from '@syncfusion/ej2-react-charts'; -import * as React from 'react'; -function App() { - return ( ); -} -export default App; - -{% endhighlight %} -{% endtabs %} - -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. - -``` -npm run dev -``` - -The below example shows a basic 3D Chart. - {% tabs %} {% highlight js tabtitle="app.jsx" %} {% include code-snippet/3d-chart/getting-started/getting-started-cs1/app/index.jsx %} @@ -124,65 +94,44 @@ The below example shows a basic 3D Chart. {% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs1" %} -## Module injection - -3D Chart components are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the 3D Chart component. In the current application, we are going to modify the above basic 3D Chart to visualize sales data for a particular year. For this application we are going to use column series, tooltip, data label, category axis and legend feature of the 3D Chart. Please find relevant feature service name and description as follows. +> Running `npm run dev` at this point renders an empty 3D Chart area. Continue with the next steps to inject modules, add data, and configure a series so the 3D Chart can render the data. -* `ColumnSeries3D` - Inject this module in to `services` to use column series. -* `Legend3D` - Inject this module in to `services` to use legend feature. -* `Tooltip3D` - Inject this module in to `services` to use tooltip feature. -* `DataLabel3D` - Inject this module in to `services` to use datalabel feature. -* `Category3D` - Inject this module in to `services` to use category feature. +## Inject Required Modules -Import the above-mentioned modules from the chart package and inject them into the `services` section of the 3D Chart component as follows. +3D Chart features are delivered as separate modules and must be explicitly injected. The `Inject` component accepts a `services` array that registers the modules required by the 3D Chart component. Injecting only the modules you need helps keep the application bundle size smaller. -{% tabs %} -{% highlight js tabtitle="app.jsx" %} +In this example, the `Tooltip3D` module is injected to enable tooltip functionality for the 3D Chart. -import { Chart3DComponent, ColumnSeries3D, Legend3D, Tooltip3D, DataLabel3D, Category3D, Inject } from '@syncfusion/ej2-react-charts'; -import * as React from "react"; +* `Tooltip3D` - Inject this module into the `services` array to enable tooltips for the 3D Chart. -function App() { - return - ; -} -export default App; +Import the required module from the Chart package and register it through the `Inject` component as shown below. -{% endhighlight %} +{% tabs %} {% highlight ts tabtitle="app.tsx" %} -import { Chart3DComponent, ColumnSeries3D, Legend3D, Tooltip3D, DataLabel3D, Category3D, Inject } from '@syncfusion/ej2-react-charts'; -import * as React from "react"; +import { Chart3DComponent, Tooltip3D, Inject } from '@syncfusion/ej2-react-charts'; +import * as React from 'react'; + function App() { - return- - ; + return ( +- + + ); } + export default App; {% endhighlight %} {% endtabs %} +> At this stage, no series are rendered because the 3D Chart component has not yet been configured with a data source. + ## Populate 3D Chart with data This section explains how to plot the following JSON data to the 3D Chart. {% tabs %} -{% highlight js tabtitle="app.jsx" %} - -export let data = [ - { x: 'Tesla', y: 137429 }, - { x: 'Aion', y: 80308 }, - { x: 'Wuling', y: 76418 }, - { x: 'Changan', y: 52849 }, - { x: 'Geely', y: 47234 }, - { x: 'Nio', y: 31041 }, - { x: 'Neta', y: 22449 }, - { x: 'BMW', y: 18733 } -]; - -{% endhighlight %} {% highlight ts tabtitle="app.tsx" %} export let data: Object[] = [ @@ -214,64 +163,47 @@ Since the JSON contains category data, set the [`valueType`](https://ej2.syncfus {% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs2" %} -## Add 3D Chart title - -You can add a title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs3" %} +## Run the application -## Enable legend +Run the application using the following command: -You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#legendsettings) object and by injecting the `Legend3D` module into the `services`. +```bash +npm run dev +``` -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.tsx %} -{% endhighlight %} -{% endtabs %} +## Troubleshooting -{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs4" %} +Use the following guidance to resolve common issues when getting started with the 3D Chart component. -## Add data label +- **Chart does not render (blank page)** + - Verify that `index.html` contains a container with `id="root"`, and that `main.tsx`/`main.jsx` calls `ReactDOM.createRoot(document.getElementById("root"))` followed by `root.render(+ )`. + - Run `npm install` again to ensure all peer dependencies listed in the [Dependencies](#dependencies) section are installed. -You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3ddatalabelsettingsmodel#visible) property to `true` in the [`dataLabel`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dseriesmodel#datalabel) object and by injecting `DataLabel3D` module into the `services`. Now, the data labels are arranged smartly based on series. +- **Tooltip, legend, or data labels are not visible after enabling them** + - The corresponding modules must be injected into the `services` array of the `Inject` component as shown in the [Module injection](#module-injection) section. For example, tooltip will not appear without `Tooltip3D`, and data labels will not render without `DataLabel3D`. -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs5/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs5/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs5" %} - -## Enable tooltip +- **Series data is not plotted or appears empty** + - Confirm that the `dataSource` array contains objects with the property names set in `xName` and `yName` (case sensitive). + - If the `x` field contains string categories, set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3daxismodel#valuetype) of `primaryXAxis` to `Category`; otherwise points will not be mapped correctly. -The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dtooltipsettingsmodel#enable) property as `true` in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#tooltip) object and by injecting `Tooltip3D` module into the `services`. +- **Build or dev server fails to start** + - Confirm that you are using a supported Node.js version (Node 18 or later for the latest Vite templates). + - Delete `node_modules` and `package-lock.json`, then run `npm install` again. -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.tsx %} -{% endhighlight %} -{% endtabs %} +## See also -{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs6" %} +Explore the following related topics: -> You can refer to our [React 3D Charts](https://www.syncfusion.com/react-components/react-3d-chart) feature tour page for its groundbreaking feature representations. You can also explore our [React 3D Charts example](https://ej2.syncfusion.com/react/demos/#tailwind3/three-dimension-chart/column) that shows various 3D Chart types and how to represent time-dependent data, showing trends in data at equal intervals. \ No newline at end of file +* [Working with Data](./workig-with-data) +* [Chart Dimensions](./dimensions) +* [Category Axis](./category-axis) +* [Numeric Axis](./numeric-axis) +* [DateTime Axis](./datetime-axis) +* [Axis Customization](./axis-customization) +* [Data Labels](./data-label) +* [Legend](./legend) +* [Tooltip](./tool-tip) +* [Appearance](./appearance) +* [Print and Export](./print-export) +* [Accessibility](./accessibility) +* [3D Chart API reference](https://ej2.syncfusion.com/react/documentation/api/chart3d/index-default) diff --git a/ej2-react/3d-chart/legend.md b/ej2-react/3d-chart/legend.md index e6309fcc22..f4715cad54 100644 --- a/ej2-react/3d-chart/legend.md +++ b/ej2-react/3d-chart/legend.md @@ -15,6 +15,21 @@ domainurl: ##DomainURL## Legend provides information about the series rendered in the 3D chart. +## Enable legend + +You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#legendsettings) object and by injecting the `Legend3D` module into the `services`. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs4" %} + ## Position and alignment By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart3d/legendSettingsModel#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default. diff --git a/ej2-react/3d-chart/tool-tip.md b/ej2-react/3d-chart/tool-tip.md index 2be0348610..7ecf8b1c0a 100644 --- a/ej2-react/3d-chart/tool-tip.md +++ b/ej2-react/3d-chart/tool-tip.md @@ -14,20 +14,20 @@ domainurl: ##DomainURL## The 3D Chart will display details about the points through tooltip, when the mouse is moved over the specific point. -## Default tooltip +## Enable tooltip -By default, tooltip is not visible. The tooltip can be enabled by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart3d/threeDimensionalTooltipSettingsModel#enable) in `tooltipSettings` to **true** and by injecting the `Tooltip3D` module into the services. +The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dtooltipsettingsmodel#enable) property as `true` in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#tooltip) object and by injecting `Tooltip3D` module into the `services`. {% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/3d-chart/tooltip/tooltip-cs1/app/index.jsx %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.jsx %} {% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/3d-chart/tooltip/tooltip-cs1/app/index.tsx %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.tsx %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/3d-chart/tooltip/tooltip-cs1" %} +{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs6" %} diff --git a/ej2-react/Release-notes/29.2.4.md b/ej2-react/Release-notes/29.2.4.md index 0f9c53b869..4b8ee3a693 100644 --- a/ej2-react/Release-notes/29.2.4.md +++ b/ej2-react/Release-notes/29.2.4.md @@ -31,7 +31,7 @@ documentation: ug | ButtonGroup | 120 | 120 | 0 | All Passed | | calendar | 177 | 177 | 0 | All Passed | | Carousel | 61 | 61 | 0 | All Passed | -| Chart | 4490 | 4490 | 0 | All Passed | +| Chart | 3666 | 3666 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | | Checkbox | 216 | 216 | 0 | All Passed | | CircularGauge | 283 | 283 | 0 | All Passed | diff --git a/ej2-react/Release-notes/34.1.30.md b/ej2-react/Release-notes/34.1.30.md new file mode 100644 index 0000000000..cc8bcd4f64 --- /dev/null +++ b/ej2-react/Release-notes/34.1.30.md @@ -0,0 +1,100 @@ +--- +title: Essential Studio for React Release Notes - v34.1.30 +description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.30 +platform: ej2-react +documentation: ug +--- + +# Essential Studio for React - v34.1.30 Release Notes + +{% include release-info.html date="July 09, 2026" version="v34.1.30" passed="79343" failed="0" %} + +{% directory path: _includes/release-notes/v34.1.30 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 114 | 114 | 0 | All Passed | +| AI Assist View | 575 | 575 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Block Editor | 2869 | 2869 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 169 | 169 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 178 | 178 | 0 | All Passed | +| Carousel | 62 | 62 | 0 | All Passed | +| Chart | 8276 | 8276 | 0 | All Passed | +| Chat UI | 690 | 690 | 0 | All Passed | +| Checkbox | 37 | 37 | 0 | All Passed | +| CircularGauge | 432 | 432 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 148 | 148 | 0 | All Passed | +| Common | 906 | 906 | 0 | All Passed | +| Context Menu | 106 | 106 | 0 | All Passed | +| Dashboard layout | 30 | 30 | 0 | All Passed | +| Data Grid | 4140 | 4140 | 0 | All Passed | +| Date Picker | 431 | 431 | 0 | All Passed | +| Date Range Picker | 521 | 521 | 0 | All Passed | +| Date Time Picker | 326 | 326 | 0 | All Passed | +| Diagram | 16999 | 16999 | 0 | All Passed | +| Dialog | 76 | 76 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 212 | 212 | 0 | All Passed | +| Dropdown Tree | 110 | 110 | 0 | All Passed | +| File Manager | 2198 | 2198 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 5605 | 5605 | 0 | All Passed | +| HeatMap Chart | 678 | 678 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 643 | 643 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 427 | 427 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1390 | 1390 | 0 | All Passed | +| Mention | 53 | 53 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 257 | 257 | 0 | All Passed | +| Multiselect Dropdown | 465 | 465 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5675 | 5675 | 0 | All Passed | +| Progress Bar | 83 | 83 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 45 | 45 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 629 | 629 | 0 | All Passed | +| Rich Text Editor | 5138 | 5138 | 0 | All Passed | +| schedule | 4734 | 4734 | 0 | All Passed | +| sidebar | 92 | 92 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 145 | 145 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 507 | 507 | 0 | All Passed | +| Tab | 71 | 71 | 0 | All Passed | +| Text Area | 112 | 112 | 0 | All Passed | +| TextBox | 69 | 69 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 142 | 142 | 0 | All Passed | +| ToolTip | 133 | 133 | 0 | All Passed | +| TreeGrid | 5022 | 5022 | 0 | All Passed | +| Treemap | 329 | 329 | 0 | All Passed | +| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-react/Release-notes/34.1.31.md b/ej2-react/Release-notes/34.1.31.md new file mode 100644 index 0000000000..329b0f35f4 --- /dev/null +++ b/ej2-react/Release-notes/34.1.31.md @@ -0,0 +1,100 @@ +--- +title: Essential Studio for React Release Notes - v34.1.31 +description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.31 +platform: ej2-react +documentation: ug +--- + +# Essential Studio for React - v34.1.31 Release Notes + +{% include release-info.html date="July 14, 2026" version="v34.1.31" passed="79360" failed="0" %} + +{% directory path: _includes/release-notes/v34.1.31 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 114 | 114 | 0 | All Passed | +| AI Assist View | 575 | 575 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Block Editor | 2869 | 2869 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 169 | 169 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 178 | 178 | 0 | All Passed | +| Carousel | 62 | 62 | 0 | All Passed | +| Chart | 8277 | 8277 | 0 | All Passed | +| Chat UI | 690 | 690 | 0 | All Passed | +| Checkbox | 37 | 37 | 0 | All Passed | +| CircularGauge | 432 | 432 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 148 | 148 | 0 | All Passed | +| Common | 906 | 906 | 0 | All Passed | +| Context Menu | 106 | 106 | 0 | All Passed | +| Dashboard layout | 30 | 30 | 0 | All Passed | +| Data Grid | 4140 | 4140 | 0 | All Passed | +| Date Picker | 431 | 431 | 0 | All Passed | +| Date Range Picker | 521 | 521 | 0 | All Passed | +| Date Time Picker | 326 | 326 | 0 | All Passed | +| Diagram | 16999 | 16999 | 0 | All Passed | +| Dialog | 76 | 76 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 212 | 212 | 0 | All Passed | +| Dropdown Tree | 110 | 110 | 0 | All Passed | +| File Manager | 2198 | 2198 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 5608 | 5608 | 0 | All Passed | +| HeatMap Chart | 678 | 678 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 643 | 643 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 427 | 427 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1390 | 1390 | 0 | All Passed | +| Mention | 54 | 54 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 258 | 258 | 0 | All Passed | +| Multiselect Dropdown | 465 | 465 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5675 | 5675 | 0 | All Passed | +| Progress Bar | 83 | 83 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 45 | 45 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 629 | 629 | 0 | All Passed | +| Rich Text Editor | 5138 | 5138 | 0 | All Passed | +| schedule | 4734 | 4734 | 0 | All Passed | +| sidebar | 92 | 92 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 145 | 145 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 507 | 507 | 0 | All Passed | +| Tab | 71 | 71 | 0 | All Passed | +| Text Area | 112 | 112 | 0 | All Passed | +| TextBox | 69 | 69 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 142 | 142 | 0 | All Passed | +| ToolTip | 133 | 133 | 0 | All Passed | +| TreeGrid | 5033 | 5033 | 0 | All Passed | +| Treemap | 329 | 329 | 0 | All Passed | +| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-react/Release-notes/34.1.32.md b/ej2-react/Release-notes/34.1.32.md new file mode 100644 index 0000000000..9d775abf14 --- /dev/null +++ b/ej2-react/Release-notes/34.1.32.md @@ -0,0 +1,101 @@ +--- +title: Essential Studio for React Release Notes - v34.1.32 +description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.32 +platform: ej2-react +documentation: ug +--- + +# Essential Studio for React - v34.1.32 Release Notes + +{% include release-info.html date="July 21, 2026" version="v34.1.32" passed="79627" failed="0" %} + +{% directory path: _includes/release-notes/v34.1.32 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 116 | 116 | 0 | All Passed | +| AI Assist View | 575 | 575 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| avatar | 43 | 43 | 0 | All Passed | +| Block Editor | 2869 | 2869 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 169 | 169 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 178 | 178 | 0 | All Passed | +| Carousel | 62 | 62 | 0 | All Passed | +| Chart | 8277 | 8277 | 0 | All Passed | +| Chat UI | 690 | 690 | 0 | All Passed | +| Checkbox | 37 | 37 | 0 | All Passed | +| CircularGauge | 432 | 432 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 148 | 148 | 0 | All Passed | +| Common | 906 | 906 | 0 | All Passed | +| Context Menu | 106 | 106 | 0 | All Passed | +| Dashboard layout | 31 | 31 | 0 | All Passed | +| Data Grid | 4180 | 4180 | 0 | All Passed | +| Date Picker | 433 | 433 | 0 | All Passed | +| Date Range Picker | 528 | 528 | 0 | All Passed | +| Date Time Picker | 326 | 326 | 0 | All Passed | +| Diagram | 17065 | 17065 | 0 | All Passed | +| Dialog | 76 | 76 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 214 | 214 | 0 | All Passed | +| Dropdown Tree | 110 | 110 | 0 | All Passed | +| File Manager | 2198 | 2198 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 5615 | 5615 | 0 | All Passed | +| HeatMap Chart | 678 | 678 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 643 | 643 | 0 | All Passed | +| Kanban | 269 | 269 | 0 | All Passed | +| LinearGauge | 427 | 427 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1390 | 1390 | 0 | All Passed | +| Mention | 56 | 56 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 261 | 261 | 0 | All Passed | +| Multiselect Dropdown | 465 | 465 | 0 | All Passed | +| OTP Input | 241 | 241 | 0 | All Passed | +| Pivot Table | 5751 | 5751 | 0 | All Passed | +| Progress Bar | 83 | 83 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 45 | 45 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 630 | 630 | 0 | All Passed | +| Rich Text Editor | 5138 | 5138 | 0 | All Passed | +| schedule | 4743 | 4743 | 0 | All Passed | +| sidebar | 94 | 94 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 145 | 145 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 507 | 507 | 0 | All Passed | +| Tab | 72 | 72 | 0 | All Passed | +| Text Area | 112 | 112 | 0 | All Passed | +| TextBox | 69 | 69 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 140 | 140 | 0 | All Passed | +| Toolbar | 142 | 142 | 0 | All Passed | +| ToolTip | 133 | 133 | 0 | All Passed | +| TreeGrid | 5033 | 5033 | 0 | All Passed | +| Treemap | 329 | 329 | 0 | All Passed | +| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-react/Release-notes/34.1.33.md b/ej2-react/Release-notes/34.1.33.md new file mode 100644 index 0000000000..927044eb51 --- /dev/null +++ b/ej2-react/Release-notes/34.1.33.md @@ -0,0 +1,101 @@ +--- +title: Essential Studio for React Release Notes - v34.1.33 +description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.33 +platform: ej2-react +documentation: ug +--- + +# Essential Studio for React - v34.1.33 Release Notes + +{% include release-info.html date="July 28, 2026" version="v34.1.33" passed="80734" failed="0" %} + +{% directory path: _includes/release-notes/v34.1.33 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 116 | 116 | 0 | All Passed | +| AI Assist View | 575 | 575 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| avatar | 45 | 45 | 0 | All Passed | +| Block Editor | 2869 | 2869 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 169 | 169 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 178 | 178 | 0 | All Passed | +| Carousel | 62 | 62 | 0 | All Passed | +| Chart | 8277 | 8277 | 0 | All Passed | +| Chat UI | 690 | 690 | 0 | All Passed | +| Checkbox | 37 | 37 | 0 | All Passed | +| CircularGauge | 432 | 432 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 148 | 148 | 0 | All Passed | +| Common | 906 | 906 | 0 | All Passed | +| Context Menu | 106 | 106 | 0 | All Passed | +| Dashboard layout | 31 | 31 | 0 | All Passed | +| Data Grid | 4557 | 4557 | 0 | All Passed | +| Date Picker | 433 | 433 | 0 | All Passed | +| Date Range Picker | 528 | 528 | 0 | All Passed | +| Date Time Picker | 326 | 326 | 0 | All Passed | +| Diagram | 17130 | 17130 | 0 | All Passed | +| Dialog | 76 | 76 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 215 | 215 | 0 | All Passed | +| Dropdown Tree | 127 | 127 | 0 | All Passed | +| File Manager | 2198 | 2198 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 5734 | 5734 | 0 | All Passed | +| HeatMap Chart | 678 | 678 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 643 | 643 | 0 | All Passed | +| Kanban | 269 | 269 | 0 | All Passed | +| LinearGauge | 427 | 427 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1390 | 1390 | 0 | All Passed | +| Mention | 56 | 56 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 261 | 261 | 0 | All Passed | +| Multiselect Dropdown | 466 | 466 | 0 | All Passed | +| OTP Input | 241 | 241 | 0 | All Passed | +| Pivot Table | 5813 | 5813 | 0 | All Passed | +| Progress Bar | 83 | 83 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 45 | 45 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 630 | 630 | 0 | All Passed | +| Rich Text Editor | 5250 | 5250 | 0 | All Passed | +| schedule | 4761 | 4761 | 0 | All Passed | +| sidebar | 94 | 94 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 58 | 58 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 145 | 145 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 507 | 507 | 0 | All Passed | +| Tab | 74 | 74 | 0 | All Passed | +| Text Area | 112 | 112 | 0 | All Passed | +| TextBox | 69 | 69 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 284 | 284 | 0 | All Passed | +| Toast | 140 | 140 | 0 | All Passed | +| Toolbar | 142 | 142 | 0 | All Passed | +| ToolTip | 133 | 133 | 0 | All Passed | +| TreeGrid | 5293 | 5293 | 0 | All Passed | +| Treemap | 329 | 329 | 0 | All Passed | +| Treeview | 371 | 371 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-react/accordion/getting-started.md b/ej2-react/accordion/getting-started.md index 30e7a909c6..0db141746d 100644 --- a/ej2-react/accordion/getting-started.md +++ b/ej2-react/accordion/getting-started.md @@ -12,80 +12,96 @@ domainurl: ##DomainURL## This section briefly explains the steps required to create a simple [React Accordion](https://www.syncfusion.com/react-components/react-accordion) and demonstrates the basic usage of the Accordion control. -## Dependencies +## Prerequisites -The following dependencies are required to use the React Accordion component in an application. +[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) -```js -|-- @syncfusion/ej2-react-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-react-base - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-popups +## Set up the Vite project -``` +To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn. -## Setup for Local Development +{% tabs %} +{% highlight bash tabtitle="npm" %} +npm create vite@latest my-project -- --template react +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} +yarn create vite my-project --template react +{% endhighlight %} +{% endtabs %} -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production. +After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt: -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`). +2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later. -To create a new React application, run the following command. +Navigate into the project directory with: -```bash -npm create vite@latest my-app ``` -To set-up a React application in TypeScript environment, run the following command. - -```bash -npm create vite@latest my-app -- --template react-ts -cd my-app -npm run dev +cd my-project ``` -To set-up a React application in JavaScript environment, run the following command. -```bash -npm create vite@latest my-app -- --template react -cd my-app -npm run dev -``` +## Add Syncfusion® React packages -## Adding Syncfusion® packages +Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install Accordion component, use the following command +To install the React component package, use the following command: -``` -npm install @syncfusion/ej2-react-navigations --save -``` +{% tabs %} +{% highlight bash tabtitle="npm" %} -## Adding CSS reference +npm install @syncfusion/ej2-react-navigations - Add components style as given below in `src/App.css`. +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-navigations/styles/tailwind3.css'; +yarn add @syncfusion/ej2-react-navigations -``` +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles + +Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme + +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} + +yarn add @syncfusion/ej2-tailwind3-theme + +{% endhighlight %} +{% endtabs %} -> To refer `App.css` in the application then import it in the `src/App.tsx` file. +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. -## Initialize the Accordion using Items +The required styles for the Accordion component are imported in the **src/App.css** file: + +{% tabs %} +{% highlight css tabtitle="App.css" %} + +@import "@syncfusion/ej2-tailwind3-theme/styles/accordion/index.css"; + +{% endhighlight %} +{% endtabs %} -The React Accordion can be rendered by defining an array of [`items`](https://ej2.syncfusion.com/react/documentation/api/accordion#items). +> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages). -* Import the Accordion component to your `src/App.tsx` file using following code. +## Add the Accordion component +Now, you can add the React Accordion component to your **src/App.jsx** file by importing and defining it within your application. Use the following code: +{% tabs %} +{% highlight js tabtitle="App.jsx" %} -```ts import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations'; import * as React from 'react'; +import './App.css'; const ReactApp = () => { const aspContent = () => { @@ -116,53 +132,22 @@ const ReactApp = () => { ); } -export default ReactApp; - -``` +export default ReactApp; +{% endhighlight %} +{% endtabs %} +## Run the application -Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. +Run the `npm run dev` command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser. -``` +```bash npm run dev ``` - -{% previewsample "page.domainurl/code-snippet/accordion/accordion-cs4" %} - -> In the above sample code, `#element` is the `id` of the HTML element in a page to which the Accordion is initialized. - -## Initialize the Accordion using HTML elements - -The React Accordion component can be rendered based on the given HTML element using `id` as `target` property. -You need to follow the below structure of HTML elements to render the Accordion. - -``` - --> Root Accordion Element --``` -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/accordion/accordion-cs5/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/accordion/accordion-cs5/app/index.tsx %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/accordion/accordion-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/accordion/accordion-cs5" %} +The output will appear as follows: + +{% previewsample "page.domainurl/code-snippet/accordion/accordion-cs4" %} > A custom class can be added to the Accordion component using the [`cssClass`](https://ej2.syncfusion.com/react/documentation/api/accordion/accordionItem#cssclass) property to customize its appearance. diff --git a/ej2-react/accumulation-chart/getting-started.md b/ej2-react/accumulation-chart/getting-started.md index 4aed9e1f81..2cb28bd808 100644 --- a/ej2-react/accumulation-chart/getting-started.md +++ b/ej2-react/accumulation-chart/getting-started.md @@ -1,8 +1,8 @@ --- layout: post title: Getting started with React Accumulation Chart component | Syncfusion -description: Checkout and learn about Getting started with React Accumulation Chart component of Syncfusion Essential JS 2 and more details. -control: Getting started +description: Check out and learn about the Getting started with React Accumulation Chart component of Syncfusion Essential JS 2 and more details. +control: Getting started platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Getting Started with React Accumulation Chart Component -This section describes the steps to create a simple Accumulation Chart. +This section describes the steps to create a simple Accumulation Chart component. A quick video overview of the React Accumulation Charts setup is available: @@ -18,71 +18,54 @@ A quick video overview of the React Accumulation Charts setup is available: ## Prerequisites -Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) +Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement). That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components. -## Before You Begin +## Set up a development environment -This guide uses the React application structure generated by Vite with the TypeScript template. +To set up a React application quickly, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up the environment using JavaScript and optimizes applications for production. -The main files used in this guide are: +> As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app). For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app). -* `src/App.tsx` — Defines the root React component. -* `src/main.tsx` — Application entry point. -* `index.html` — Root HTML file. +To create a new React application, run one of the following commands based on your preferred language: -> **Note:** In a Vite React TypeScript application, the root component is commonly generated as `src/App.tsx`. If your application uses JavaScript, the equivalent file is typically `src/App.jsx`. +**React with JavaScript** -> **Note:** This guide uses the TypeScript template for better type checking with Accumulation Chart models. - -## Installation and configuration - -> **Note:** As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app). - -### Step 1: Set up the React environment +``` +npm create vite@latest my-app -- --template react +``` -Use [Vite](https://vitejs.dev/) to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications. +**React with TypeScript** -Start by opening a terminal on your system **(Command Prompt, PowerShell, or Terminal)**. You may work from the default C: drive location or create a new folder and open the terminal in it. +``` +npm create vite@latest my-app -- --template react-ts +``` -### Step 2: Create a React application +During the setup process, the CLI will prompt you for a few configuration options. Select the following: -Create a new React application using the below command. +- **Which linter to use?** → **ESLint** +- **Install with npm and start now?** → **Yes** -```bash -npm create vite@latest my-chart-app -- --template react-ts -``` +Selecting **Yes** automatically installs the project dependencies and starts the development server. -If Vite prompts you to install dependencies and start the project immediately, choose **No**. The Syncfusion package is installed in a later step. +After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step. -Navigate to the project folder: +Then, navigate to the project directory: -```bash -cd my-chart-app ``` - -Install the application dependencies: - -```bash -npm install +cd my-app ``` -> **Note:** If you prefer JavaScript instead of TypeScript, create the application using `npm create vite@latest my-chart-app -- --template react`. - -### Step 3: Install the Syncfusion® React Chart package +## Install the Syncfusion® React Accumulation Chart package -All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. +All Syncfusion Essential® JS 2 packages are published to the [npm registry](https://www.npmjs.com/~syncfusionorg). -Install the React Chart package using the following command: +Install the React Accumulation package using the following command: ```bash -npm install @syncfusion/ej2-react-charts --save +npm install @syncfusion/ej2-react-charts ``` -> Installing `@syncfusion/ej2-react-charts` automatically installs the required dependency packages. The –save will instruct NPM to include the Chart package inside of the **dependencies** section of the package.json. - -The steps up to this point can be completed using the initially opened terminal or command prompt. For adding Chart components, open the project in the IDE installed on your device. - -### Step 4: Add Accumulation Chart to the project +## Add the Accumulation Chart component to the project Add the Accumulation Chart component to `src/App.tsx` using the following code. @@ -90,87 +73,74 @@ Add the Accumulation Chart component to `src/App.tsx` using the following code. {% highlight ts tabtitle="~/src/App.tsx" %} import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts'; function App() { - return (--> Accordion Item Container ----> Accordion Header Container ----> Accordion Header ---> Accordion Panel Container ----> Accordion Content -); + return ( ); } export default App; {% endhighlight %} {% endtabs %} -> **Note:** This will render an empty accumulation chart area by running `npm run dev` in terminal ([Refer Step 7](#step-7-run-the-application)). Proceed to the next steps to add data, series, and necessary module injections to visualize your data. +> Running `npm run dev` at this point renders an empty Accumulation Chart area. Continue with the next steps to inject modules, add data, and configure a series so the chart can render the data. -### Step 5: Module injection +## Inject Required Modules -Accumulation Chart features are delivered as separate modules and must be explicitly injected. Here, the PieSeries module is used to render basic pie chart. +Accumulation Chart features are delivered as separate modules and must be explicitly injected. The `Inject` component accepts a `services` array that registers the modules required by the Accumulation Chart component. Injecting only the modules you need helps reduce the application bundle size. -* `PieSeries` - Inject this module in to `services` to use pie series. +In this example, the `PieSeries` module is injected to render a basic pie chart. -Import the above-mentioned module from the chart package and inject that into the `services` section of the Accumulation Chart component as follows. +* `PieSeries` - Inject this module into the `services` array to enable pie series rendering. + +Import the required module from the Chart package and register it through the `Inject` component as shown below. {% tabs %} {% highlight ts tabtitle="~/src/App.tsx" %} import { AccumulationChartComponent, PieSeries, Inject } from '@syncfusion/ej2-react-charts'; + function App() { - return ( - - - ); + return ( +- + + ); } + export default App; {% endhighlight %} {% endtabs %} -**Note:** At this stage, No pie series is rendered because the Accumulation Chart component has not yet been configured with a data source. +> At this stage, no pie series is rendered because the Accumulation Chart component has not yet been configured with a data source. -### Step 6: Populate Accumulation Chart with data +## Populate the Accumulation Chart with data -The pie chart data should be provided as a JSON array in the following format. You can define the data in the same `src/App.tsx` file or place it in a separate file (for example, `src/datasource.ts`) and import it into `App.tsx`. +Define the data in `src/App.tsx` and bind it to the Accumulation Chart. {% tabs %} -{% highlight ts tabtitle="~/src/datasource.ts" %} -const data = [ - { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' }, - { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' }, - { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' }, - { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' }, - { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' } - ]; +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/code-path/accumulation-getting-started-cs1/app/index.jsx %} {% endhighlight %} -{% endtabs %} - -After defining the required data set, bind the data to the Chart component in the `AccumulationSeriesDirective` tag. The following code snippet demonstrates the complete configuration required to render a basic pie chart. - -{% tabs %} -{% highlight ts tabtitle="~/src/App.tsx" %} -import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PieSeries } from '@syncfusion/ej2-react-charts'; - -function App() { - const data = [ - { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' }, - { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' }, - { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' }, - { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' }, - { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' } - ]; - - return+ - ; -} -export default App; +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/code-path/accumulation-getting-started-cs1/app/index.tsx %} {% endhighlight %} {% endtabs %} -### Step 7: Run the application +{% previewsample "page.domainurl/code-snippet/chart/preview-sample/series/funnel-cs1" %} + +## Run the application Run the application using the following command: ```bash npm run dev ``` -Open the generated local URL (for example, `localhost:5173/`) from terminal in the browser. The application displays the basic pie chart as shown below: - \ No newline at end of file +Open the generated local URL (for example, `http://localhost:5173/`) in the browser. The application displays the basic pie chart as shown below: + + + +## See also + +* [React Accumulation Charts Component feature tour](https://www.syncfusion.com/react-components/react-charts). +* [Pie, Doughnut, Pyramid, and Funnel chart types](https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut). +* [Accumulation Chart data label](https://ej2.syncfusion.com/react/documentation/accumulation-chart/data-label). +* [Accumulation Chart legend](https://ej2.syncfusion.com/react/documentation/accumulation-chart/legend). +* [Accumulation Chart tooltip](https://ej2.syncfusion.com/react/documentation/accumulation-chart/tool-tip). +* [Accumulation Chart API reference](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/index-default) \ No newline at end of file diff --git a/ej2-react/ai-assistview/generative-ui.md b/ej2-react/ai-assistview/generative-ui.md index a100bd7b97..0eaeec8233 100644 --- a/ej2-react/ai-assistview/generative-ui.md +++ b/ej2-react/ai-assistview/generative-ui.md @@ -43,7 +43,7 @@ You can configure the AI service to return structured JSON blocks through `syste The following example demonstrates how to connect your AI service to generate and display dynamic UI components within the AI AssistView. -```tsx +```ts import React, { useRef } from 'react'; import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; diff --git a/ej2-react/ai-assistview/getting-started.md b/ej2-react/ai-assistview/getting-started.md index 09c39593dd..1f0feff09e 100644 --- a/ej2-react/ai-assistview/getting-started.md +++ b/ej2-react/ai-assistview/getting-started.md @@ -8,84 +8,115 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started with the React AI AssistView Component +# Getting Started with the React AI AssistView -This section explains how to create a simple **AI AssistView** component and configure its available functionalities in React. +This section explains the steps required to create a simple [React AI AssistView](https://www.syncfusion.com/react-components/react-ai-assistview) component and demonstrate its basic usage in a React environment. To get started quickly with the React AI AssistView component, you can check out this video tutorial: {% youtube "https://www.youtube.com/watch?v=rwXanLEHdFU" %} -## Create a React Application +## Prerequisites -Run the following commands to set up a React application: +| Requirement | Version | +|-------------|---------| +| React | 15.5.4 or higher | +| Node.js | 14.0.0 or above | +| Yarn (optional) | 0.25 or above | -```bash -npm create vite@latest my-app -- --template react-ts -``` +### React supported versions + +| React version | Minimum Syncfusion React Data AI AssistView version | +| ------------- | ------------------------------------------- | +| [React v19](https://react.dev/blog/2024/12/05/react-19) | 29.1.33 and above | +| [React v18](https://reactjs.org/blog/2022/03/29/react-v18.html) | 20.2.36 and above | +| [React v17](https://reactjs.org/blog/2020/10/20/react-v17.html) | 18.3.50 and above | +| [React v16](https://reactjs.org/blog/2017/09/26/react-v16.0.html) | 16.2.45 and above | + +### Browser support + +| Browser | Supported versions | +|---|---| +| Chrome | Latest | +| Firefox | Latest | +| Opera | Latest | +| Edge | 13+ | +| Internet Explorer (IE) | 11+ | +| Safari | 9+ | +| iOS Safari | 9+ | +| Android Browser / Chrome for Android | 4.4+ | +| Windows Mobile | IE 11+ | + + +## Setup for local development + +Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production. -This command will prompt you to install the required packages and start the application. Select the options as shown below. +> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. - +To create a new React application, run one of the following commands based on your preferred language: -As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands: +***React with JavaScript*** +```bash +npx create-vite@latest my-app -- --template react ``` -cd my-app -npm install + +***React with TypeScript*** + +```bash +npx create-vite@latest my-app -- --template react-ts ``` -> **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details. +During the setup process, the CLI will prompt you for a few configuration options. Select the following: + +- **Which linter to use?** → **ESLint** +- **Install with npm and start now?** → **Yes** + +Selecting **Yes** automatically installs the project dependencies and starts the development server. -## Adding Syncfusion® Packages +After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step. -All Syncfusion Essential® JS 2 packages are available on the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. +Then, navigate to the project directory: -To install the AI AssistView component package, run the following command: +```bash +cd my-app +``` + +## Adding React AI AssistView packages + +To install the AI AssistView package, use the following command: ```bash npm install @syncfusion/ej2-react-interactive-chat --save ``` -## Adding CSS References +## Adding CSS reference -To apply styling to the AI AssistView component, import the required CSS theme files into your `src/App.css` file. The following example uses the Tailwind3 theme, but other themes like Bootstrap 5, Tailwind CSS, or Fluent are also available. +Themes for Syncfusion® AI AssistView component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. -To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +Install the **Tailwind 3** theme package using the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} -```bash npm install @syncfusion/ej2-tailwind3-theme --save -``` -```css -@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css"; -``` +{% endhighlight %} +{% endtabs %} -## Adding the AI AssistView Component +Then add the following CSS reference to the **src/App.css** file: -Now, you can start adding AI AssistView component in the application. For getting started, add the AI AssistView component by using `- - -- ` tag directive in `src/App.tsx` file using following code. Now place the below AI AssistView code in the `src/App.tsx`. +{% tabs %} +{% highlight css tabtitle="App.css" %} -```ts -import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; -import * as React from 'react'; -import * as ReactDOM from "react-dom"; - -function App() { - return ( - // specifies the tag for render the AI AssistView component - - ); -} - -ReactDOM.render( , document.getElementById('aiAssistView')); -``` +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css"; -## Run the Application +{% endhighlight %} +{% endtabs %} -With the configuration complete, run the application to see the AI AssistView component rendered in your browser. +## Adding AI AssistView component -``` -npm start -``` +The AI AssistView code should be added to the **src/App.tsx** file. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -98,9 +129,28 @@ npm start {% previewsample "page.domainurl/code-snippet/ai-assistview/getting-started" %} +## Run the application + +With the configuration complete, run the application to see the AI AssistView component rendered in your browser. + +``` +npm run dev +``` > **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added. -## Configure Suggestions and Asynchronous Responses +## Registering your Syncfusion License + +Generate a license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register it before rendering your React application: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY'); +``` + +> **Note:** A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed. + +## Configure suggestions and asynchronous responses The AI AssistView component can be configured to guide user interactions and provide dynamic content from an AI backend. @@ -118,4 +168,24 @@ The following example demonstrates how to define prompt suggestions and handle t {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/ai-assistview/defaultprompts" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/ai-assistview/defaultprompts" %} + +### Production build + +To create an optimized production build: + +```bash +npm run build +``` + +Preview the production build locally: + +```bash +npm run preview +``` + +## Troubleshooting + +- **AI AssistView not rendering styles:** Ensure the theme CSS is imported in `App.css` and that you removed the default Vite CSS in `index.css`. +- **Trial license warning banner:** Register a license key via `registerLicense()` from `@syncfusion/ej2-base`. +- **Port 5173 already in use:** Stop the conflicting process or run Vite on a different port with `npm run dev -- --port 3000`. diff --git a/ej2-react/ai-tools/release-notes.md b/ej2-react/ai-tools/release-notes.md index 8d2bfc69f9..9655db9458 100644 --- a/ej2-react/ai-tools/release-notes.md +++ b/ej2-react/ai-tools/release-notes.md @@ -1,26 +1,38 @@ --- layout: post -title: Release Notes - Syncfusion React MCP Server | Syncfusion -description: Explore the release notes for Syncfusion React MCP Server, featuring Agentic UI Builder, 145+ components, theme integration, and AI-powered React development tools. -control: Syncfusion MCP Server Release Notes +title: Release Notes - Syncfusion React AI and Smart Tooling | Syncfusion +description: Explore the release notes for Syncfusion Angular AI and Smart Tooling, covering MCP Server, Skills, and Agentic UI Builder updates across all versions. +control: Syncfusion React AI and Smart Tooling Release Notes platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Syncfusion React MCP Server Release Notes +# Syncfusion React AI and Smart Tooling Release Notes -This document provides information about the changes and new features included in each version of the [@syncfusion/react-assistant](https://www.npmjs.com/package/@syncfusion/react-assistant) MCP server package. +This document provides information about the changes and new features included in each version of the Syncfusion React AI and Smart Tooling, including the [@syncfusion/react-assistant](https://www.npmjs.com/package/@syncfusion/react-assistant) MCP Server, Skills, Agentic UI Builder and so on. -## (v2.0.1) – March 27, 2026 +## MCP Server -### Features +**(v3.0.0) - July 21, 2026** + +**Breaking Changes** + +- The **UI Builder** tool has been redefined as an agent-skill based experience and is no longer available within this server. For more information about the **Agentic UI Builder**, refer to this [link](https://www.syncfusion.com/explore/agentic-ui-builder). + +**(v2.0.1) - March 27, 2026** + +**Features** - Updated package dependencies to resolve security vulnerabilities and enhance stability. -## (v2.0.0) – February 23, 2026 +**(v2.0.0) - February 23, 2026** -### Features +**Breaking Changes** + +- Renamed the coding assistant tool identifier from **`SyncfusionReactAssistant`** to **`sf_react_assistant`** for consistency, brevity, and improved user experience. + +**Features** - Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete React applications using natural language prompts, significantly boosting your productivity and accelerating development workflow. - Agentic UI Builder sub-tools: @@ -29,27 +41,41 @@ This document provides information about the changes and new features included i - **Styling Tool** (#sf_react_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration. - Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training). -### Breaking Changes - -- Renamed the coding assistant tool identifier from **`SyncfusionReactAssistant`** to **`sf_react_assistant`** for consistency, brevity, and improved user experience. +**(v1.0.1) - February 10, 2026** -## (v1.0.1) – February 10, 2026 - -### Features +**Features** - Updated package dependencies to resolve security vulnerabilities and enhance stability. -## (v1.0.0) – December 16, 2025 +**(v1.0.0) - December 16, 2025** -### Features +**Features** - Added support for API key validation through file path reference. - Updated package dependencies and security standards for improved reliability and safety. -## (v0.1.0) – October 10, 2025 +**(v0.1.0) - October 10, 2025** -### Features +**Features** - Initial release of AI Coding Assistant for Syncfusion React components. - Provides context-aware assistance for building React applications with Syncfusion components. - Includes support for component APIs, properties, and troubleshooting guidance. + +## Skills + +**Features** + +- Introduced [Agent Skills](https://www.syncfusion.com/explore/agent-skills) — a set of lightweight, modular capabilities that extend the AI Coding Assistant with specialized knowledge, including pre-defined instructions, best practices, and curated code patterns for building React applications with Syncfusion components. +- Each skill is defined in a simple, readable `SKILL.md` file that specifies the correct setup, required modules, current APIs and patterns, and what a valid implementation looks like for a given component. +- Works as a standard, lightweight approach supported by modern AI development tools: install skills, the tool detects them, and the relevant skill is automatically applied to the user's prompt. + +## Agentic UI Builder + +**(v1.0.0) - Jun 5, 2026** + +**Features** + +- Evolved the [Agentic UI Builder](https://www.syncfusion.com/explore/agentic-ui-builder) architecture with Agent Skills, bringing implementation guidance directly into the project environment for more project-aware, context-grounded UI generation. +- Made UI generation easier to customize and align with internal coding standards and conventions. +- Streamlined the local development experience while preserving the same AI-assisted UI generation workflow developers already rely on. diff --git a/ej2-react/appbar/getting-started.md b/ej2-react/appbar/getting-started.md index 23aae33ad9..f8394ee7f5 100644 --- a/ej2-react/appbar/getting-started.md +++ b/ej2-react/appbar/getting-started.md @@ -12,100 +12,126 @@ domainurl: ##DomainURL## This section explains how to create a simple AppBar, and configure its available functionalities in React. -## Dependencies +## Prerequisites -The following dependencies are required to use the AppBar component in an application. These packages provide core functionalities and UI controls for the AppBar. +[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) -```javascript -|-- @syncfusion/ej2-react-navigations - |-- @syncfusion/ej2-react-base - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base -``` +## Set up the Vite project -## Setup your development environment +To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn. -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production. +{% tabs %} +{% highlight bash tabtitle="npm" %} +npm create vite@latest my-project -- --template react +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} +yarn create vite my-project --template react +{% endhighlight %} +{% endtabs %} -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt: -To create a new React application, run the following command. +1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`). +2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later. -```bash -npm create vite@latest my-app -``` -To set-up a React application in TypeScript environment, run the following command. +Navigate into the project directory with: -```bash -npm create vite@latest my-app -- --template react-ts -cd my-app -npm run dev ``` -To set-up a React application in JavaScript environment, run the following command. - -```bash -npm create vite@latest my-app -- --template react -cd my-app -npm run dev +cd my-project ``` -## Adding Syncfusion® packages +## Add Syncfusion® React packages -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. +Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. -To install `AppBar` component, use the following command +To install the React component package, use the following command: -```bash -npm install @syncfusion/ej2-react-navigations --save -npm install @syncfusion/ej2-react-buttons --save +{% tabs %} +{% highlight bash tabtitle="npm" %} -``` +npm install @syncfusion/ej2-react-navigations -The above command installs [AppBar dependencies](./getting-started#dependencies) -which are required to render the component in the `React` environment. +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -## Adding Style sheet to the Application +yarn add @syncfusion/ej2-react-navigations -Add AppBar component's styles as given below in `App.css`. +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles -```css -@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; -``` +Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme -## Add AppBar to the project +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -Create the `AppBar` component in the application by adding the following code snippet to the `src/App.tsx` file. +yarn add @syncfusion/ej2-tailwind3-theme +{% endhighlight %} +{% endtabs %} +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. + +The required styles for the AppBar component are imported in the **src/App.css** file: + +{% tabs %} +{% highlight css tabtitle="App.css" %} + +@import "@syncfusion/ej2-tailwind3-theme/styles/appbar/index.css"; +@import "@syncfusion/ej2-tailwind3-theme/styles/button/index.css"; + +{% endhighlight %} +{% endtabs %} + +> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages). + +## Add the AppBar component + +Now, you can add the React AppBar component to your **src/App.jsx** file by importing and defining it within your application. Use the following code: + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} -```ts import { AppBarComponent } from "@syncfusion/ej2-react-navigations"; -import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; import * as React from "react"; +import './App.css'; const App = () => { return ( ); } export default App; -``` + +{% endhighlight %} +{% endtabs %} ## Run the application -Run the `npm run dev` command in the console to start the development server. This command compiles code and serves the application locally, opening it in the browser. +Run the `npm run dev` command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser. -``` +```bash npm run dev ``` - {% previewsample "page.domainurl/code-snippet/appbar/getting-started-cs1" %} \ No newline at end of file +The output will appear as follows: + +{% previewsample "page.domainurl/code-snippet/appbar/getting-started-cs1" %} \ No newline at end of file diff --git a/ej2-react/appearance/images/gatsby.png b/ej2-react/appearance/images/gatsby.png index 7cf7141cda..be1241ea34 100644 Binary files a/ej2-react/appearance/images/gatsby.png and b/ej2-react/appearance/images/gatsby.png differ diff --git a/ej2-react/appearance/images/preact.png b/ej2-react/appearance/images/preact.png index 7cf7141cda..fb49b0cb3d 100644 Binary files a/ej2-react/appearance/images/preact.png and b/ej2-react/appearance/images/preact.png differ diff --git a/ej2-react/auto-complete/accessibility.md b/ej2-react/auto-complete/accessibility.md index de1ca7176a..70d229b8c4 100644 --- a/ej2-react/auto-complete/accessibility.md +++ b/ej2-react/auto-complete/accessibility.md @@ -62,10 +62,10 @@ You can use the following key shortcuts to access the AutoComplete without inter | **Keyboard shortcuts** | **Actions** | | --- | --- | -| Arrow Down | In popup hidden state, opens the suggestion list. In popup open state, selects the first item when no item is selected, or selects the item next to the currently selected item. | -| Arrow Up | In popup hidden state, opens the suggestion list. In popup open state, selects the last item when no item is selected, or selects the item previous to the currently selected one. | -| Page Down | Scrolls down to the next page and selects the first item when popup list opens. | -| Page Up | Scrolls up to the previous page and selects the first item when popup list opens. | +| Arrow Down | In popup hidden state, opens the suggestion list. In popup open state, focus the first item when no item is selected, or focus the item next to the currently selected item. | +| Arrow Up | In popup hidden state, opens the suggestion list. In popup open state, focus the last item when no item is selected, or focus the item previous to the currently selected one. | +| Page Down | Scrolls down to the next page and focus the first item when popup list opens. | +| Page Up | Scrolls up to the previous page and focus the first item when popup list opens. | | Enter | Selects the focused item and sets it to the AutoComplete component. | | Tab | Focuses on the next tab indexed element when the popup is closed. Otherwise, closes the popup list and remains the focus in the component if it is in an open state. | | Shift + tab | Focuses on the previous tab indexed element when the popup is closed. Otherwise, closes the popup list and remains the focus in the component if it is in an open state. | diff --git a/ej2-react/auto-complete/getting-started.md b/ej2-react/auto-complete/getting-started.md index 1196c6bf12..5d1f77c9f9 100644 --- a/ej2-react/auto-complete/getting-started.md +++ b/ej2-react/auto-complete/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with React Auto complete component | Syncfusion -description: Checkout and learn about Getting started with React Auto complete component of Syncfusion Essential JS 2 and more details. -control: Getting started +title: Getting started with React AutoComplete component | Syncfusion +description: Checkout and learn about Getting started with React AutoComplete component of Syncfusion Essential JS 2 and more details. +control: AutoComplete platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Getting Started with React AutoComplete component +# Getting started with React AutoComplete component This section explains the steps required to create a simple React AutoComplete component and demonstrate its basic usage in a React environment. @@ -18,136 +18,109 @@ To get started quickly with React AutoComplete, you can watch this video: {% youtube "https://www.youtube.com/watch?v=qpnnfN_E8PY" %} -## Setup for local development +## Prerequisites -Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production. +[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +## Set up the Vite project -To create a new React application, run the following command. +To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn. -```bash -npm create vite@latest my-app -``` -This command will prompt you for a few settings for the new project, such as selecting a framework and a variant. +{% tabs %} +{% highlight bash tabtitle="npm" %} +npm create vite@latest my-project -- --template react +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} +yarn create vite my-project --template react +{% endhighlight %} +{% endtabs %} - +After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt: -To set up a React application in TypeScript environment, run the following command. +1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`). +2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later. -```bash -npm create vite@latest my-app -- --template react-ts -cd my-app -npm run dev -``` -To set up a React application in JavaScript environment, run the following command. +Navigate into the project directory with: -```bash -npm create vite@latest my-app -- --template react -cd my-app -npm run dev +``` +cd my-project ``` -## Adding Syncfusion® AutoComplete packages +## Add Syncfusion® React packages -All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install the AutoComplete component, use the following command +Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. -```bash -npm install @syncfusion/ej2-react-dropdowns --save -``` +To install the React component package, use the following command: -> The --save will instruct NPM to include the AutoComplete package inside of the **dependencies** section of the package.json. +{% tabs %} +{% highlight bash tabtitle="npm" %} -## Adding CSS reference +npm install @syncfusion/ej2-react-dropdowns -The following CSS files are available in the **../node_modules/@syncfusion** package folder. Add these as references in **src/App.css**. +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -```css -@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/tailwind3.css"; -``` +yarn add @syncfusion/ej2-react-dropdowns -> To refer **App.css** in the application then import it in the **src/App.tsx** file. +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles -## Adding AutoComplete component +Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). -The React AutoComplete component can be added to the application by following these steps. To get started, add the AutoComplete component to the **src/App.tsx** file using the following code. +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: -The following autocomplete code should be placed in the **src/App.tsx** file. +{% tabs %} +{% highlight bash tabtitle="npm" %} -`[Class-component]` +npm install @syncfusion/ej2-tailwind3-theme -```ts -import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; -import * as React from 'react'; -import './App.css'; +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -export default class App extends React.Component<{}, {}> { - public render() { - return ( - // specifies the tag for render the AutoComplete component -- + React AppBar - FREE TRIAL +- ); - } -} -``` +yarn add @syncfusion/ej2-tailwind3-theme -`[Functional-component]` +{% endhighlight %} +{% endtabs %} -```ts -import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; -import * as React from 'react'; -import './App.css'; +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. -export default function App() { - return ( - // specifies the tag for render the AutoComplete component - - ); -} -``` +The required styles for the AutoComplete component are imported in the **src/App.css** file: -## Binding data source +{% tabs %} +{% highlight css tabtitle="App.css" %} -After initialization, populate the data using [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#datasource) property. Here, an array of string values is passed to the AutoComplete component. +@import "@syncfusion/ej2-tailwind3-theme/styles/auto-complete/index.css"; -`[Class-component]` +{% endhighlight %} +{% endtabs %} -```ts -import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; -import * as React from 'react'; -import './App.css'; +> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages). -export default class App extends React.Component<{}, {}> { - // define the array of data - private sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis']; - public render() { - return ( - // specifies the tag for render the AutoComplete component - - ); - } -} -``` +## Add the AutoComplete component + +Now, you can add the React AutoComplete component to your **src/App.jsx** file by importing and defining it within your application. Then, populate the AutoComplete with data using the [dataSource](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#datasource) property, which accepts an array of string values to display as suggestions. Use the following code: -`[Functional-component]` +{% tabs %} +{% highlight js tabtitle="App.jsx" %} -```ts import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; -import * as React from 'react'; import './App.css'; -export default function App() { - // define the array of data - const sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis']; - return ( - // specifies the tag for render the AutoComplete component - +function App() { + // define the array of data + const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis']; + return ( + // specifies the tag for rendering the AutoComplete component + ); } -``` + +export default App; + +{% endhighlight %} +{% endtabs %} ## Run the application @@ -157,22 +130,7 @@ Run the `npm run dev` command in the terminal to start the development server. T npm run dev ``` -The output appears as follows. - -`[Class-component]` - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/dropdownlist/basic-cs3/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/dropdownlist/basic-cs3/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/dropdownlist/basic-cs3" %} - -`[Functional-component]` +The output will appear as follows: {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -183,41 +141,7 @@ The output appears as follows. {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/dropdownlist/basic-cs4" %} - -## Configure the Popup List - -By default, the width of the popup list automatically adjusts according to the AutoComplete input element's width and the height of the popup list has '300px'. - -You can also customize the suggestion list height and width using [`popupHeight`](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#popupheight) and [`popupWidth`](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#popupwidth) property respectively. - -In the following sample, popup list's width and height are configured. - -`[Class-component]` - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/autocomplete/basic-cs19/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/autocomplete/basic-cs19/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs19" %} - -`[Functional-component]` - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/autocomplete/basic-cs20/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/autocomplete/basic-cs20/app/index.tsx %} -{% endhighlight %} -{% endtabs %} - - {% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs20" %} +{% previewsample "page.domainurl/code-snippet/dropdownlist/basic-cs4" %} > Refer to the [React AutoComplete](https://www.syncfusion.com/react-components/react-autocomplete) feature tour page for its groundbreaking feature representations. You can also explore our [React AutoComplete component example](https://ej2.syncfusion.com/react/demos/#/tailwind3/auto-complete/default) that shows how to render the AutoComplete in React. diff --git a/ej2-react/avatar/getting-started.md b/ej2-react/avatar/getting-started.md index ef81a925c4..0d3b9d6e26 100644 --- a/ej2-react/avatar/getting-started.md +++ b/ej2-react/avatar/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with React Avatar component | Syncfusion -description: Checkout and learn about Getting started with React Avatar component of Syncfusion Essential JS 2 and more details. +title: Getting Started with React Avatar component | Syncfusion +description: Checkout and learn about Getting Started with React Avatar component of Syncfusion Essential JS 2 and more details. control: Avatar platform: ej2-react documentation: ug @@ -10,92 +10,144 @@ domainurl: ##DomainURL## # Getting started with React Avatar component -This section explains how to create a simple **Avatar** using styles in the React framework. +This section explains the steps required to create a simple React Avatar component and demonstrate its basic usage in a React environment. -## Dependencies +> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistant/overview). -The Avatar component is a pure CSS-based component and does not require any JavaScript dependencies for rendering. +To get started quickly with React Avatar, you can watch this video: -## Installation and configuration +{% youtube "https://www.youtube.com/watch?v=qpnnfN_E8PY" %} -To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite configures the project using JavaScript or TypeScript and streamlines the build process for production environments. +## Prerequisites -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. +[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) -To create a new React application, run the following command: +## Set up the Vite project -```bash -npm create vite@latest my-app -``` +To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn. -To set up a React application in a TypeScript environment, run the following commands: +{% tabs %} +{% highlight bash tabtitle="npm" %} +npm create vite@latest my-project -- --template react +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} +yarn create vite my-project --template react +{% endhighlight %} +{% endtabs %} -```bash -npm create vite@latest my-app -- --template react-ts -cd my-app -npm run dev -``` +After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt: -To set up a React application in a JavaScript environment, run the following commands: +1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`). +2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later. + +Navigate into the project directory with: -```bash -npm create vite@latest my-app -- --template react -cd my-app -npm run dev +``` +cd my-project ``` -## Adding Syncfusion® packages +## Add Syncfusion® React packages -All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. +Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. -To install `Avatar` component, use the following command +To install the React component package, use the following command: -```bash -npm install @syncfusion/ej2-layouts --save -``` +{% tabs %} +{% highlight bash tabtitle="npm" %} -## Adding CSS Reference +npm install @syncfusion/ej2-layouts -The Avatar CSS files include base styles from `@syncfusion/ej2-base` and component styles from `@syncfusion/ej2-layouts`. Add the following CSS references to the `src/App.css` file to apply the required styles: +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css'; -``` +yarn add @syncfusion/ej2-layouts -## Adding a simple Avatar +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles -Add a `div` element with the `e-avatar` class in the `App.tsx` file: +Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). -```bash - AJ-``` +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: -## Run the application +{% tabs %} +{% highlight bash tabtitle="npm" %} -Run the `npm run dev` command to start the development server. This command compiles the application and serves it locally in the browser. +npm install @syncfusion/ej2-tailwind3-theme -```bash -npm run dev -``` +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} -Output will be as follows: +yarn add @syncfusion/ej2-tailwind3-theme -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/avatar/getting-started-cs1/app/index.jsx %} {% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/avatar/getting-started-cs1/app/index.tsx %} +{% endtabs %} + +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. + +The required styles for the Avatar component are imported in the **src/App.css** file: + +{% tabs %} +{% highlight css tabtitle="App.css" %} + +@import "@syncfusion/ej2-tailwind3-theme/styles/avatar/index.css"; + {% endhighlight %} -{% highlight ts tabtitle="app.css" %} -{% include code-snippet/avatar/getting-started-cs1/index.css %} +{% endtabs %} + +> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages). + +## Add the Avatar component + +Add a `div` element with the `e-avatar` class in the `App.tsx` file: + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} + +import * as React from "react"; +import "./App.css"; + +function ReactApp() { + return (+ + + + + +); +} +export default ReactApp; + {% endhighlight %} -{% highlight ts tabtitle="index.html" %} -{% include code-snippet/avatar/getting-started-cs1/index.html %} +{% endtabs %} + +{% tabs %} +{% highlight css tabtitle="App.css" %} + +@import "@syncfusion/ej2-tailwind3-theme/styles/avatar/index.css"; + +#container { + visibility: hidden; +} +.e-avatar { + background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png); + margin: 2px; +} + {% endhighlight %} {% endtabs %} +## Run the application + +Run the `npm run dev` command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser. + +```bash +npm run dev +``` + +Output will be as follows: + {% previewsample "page.domainurl/code-snippet/avatar/getting-started-cs1" %} ## See Also diff --git a/ej2-react/badge/getting-started.md b/ej2-react/badge/getting-started.md index 4131ff3a69..55589050d3 100644 --- a/ej2-react/badge/getting-started.md +++ b/ej2-react/badge/getting-started.md @@ -2,7 +2,7 @@ layout: post title: Getting started with React Badge component | Syncfusion description: Checkout and learn about Getting started with React Badge component of Syncfusion Essential JS 2 and more details. -control: Getting started +control: Badge platform: ej2-react documentation: ug domainurl: ##DomainURL## @@ -14,65 +14,95 @@ This section explains the steps required to create a simple React Badge componen > **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistant/overview). -## Setup for local development - -Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production. - -> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details. - -To create a new React application, run the following command. - -```bash -npm create vite@latest my-app -``` -This command will prompt you for a few settings for the new project, such as selecting a framework and a variant. - - - -To set up a React application in TypeScript environment, run the following command. - -```bash -npm create vite@latest my-app -- --template react-ts -cd my-app -npm run dev -``` -To set up a React application in JavaScript environment, run the following command. - -```bash -npm create vite@latest my-app -- --template react -cd my-app -npm run dev -``` - -## Adding Syncfusion® Badge packages - -All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install the Badge component, use the following command - -```bash -npm install @syncfusion/ej2-react-notifications --save +## Prerequisites + +[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) + +## Set up the Vite project + +To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn. + +{% tabs %} +{% highlight bash tabtitle="npm" %} +npm create vite@latest my-project -- --template react +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} +yarn create vite my-project --template react +{% endhighlight %} +{% endtabs %} + +After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt: + +1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`). +2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later. + +Navigate into the project directory with: + ``` - -> The --save will instruct NPM to include the Badge package inside of the **dependencies** section of the package.json. - -## Adding CSS reference - -The following CSS files are available in the **../node_modules/@syncfusion** package folder. Add these as references in **src/App.css**. - -```css -@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css"; +cd my-project ``` - -> To refer **App.css** in the application then import it in the **src/App.tsx** file. + +## Add Syncfusion® React packages + +Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. + +To install the React component package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-react-notifications + +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} + +yarn add @syncfusion/ej2-react-notifications + +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles + +Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme + +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} + +yarn add @syncfusion/ej2-tailwind3-theme + +{% endhighlight %} +{% endtabs %} + +By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts. + +The required styles for the Badge component are imported in the **src/App.css** file: + +{% tabs %} +{% highlight css tabtitle="App.css" %} + +@import "@syncfusion/ej2-tailwind3-theme/styles/badge/index.css"; + +{% endhighlight %} +{% endtabs %} + +> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages). ## Adding Badge component -The React Badge component can be added to the application by following these steps. To get started, add the Badge component to the **src/App.tsx** file using the following code. +The React Badge component can be added to the application by following these steps. To get started, add the Badge component to the **src/App.jsx** file using the following code. -The following badge code should be placed in the **src/App.tsx** file. +The following badge code should be placed in the **src/App.jsx** file. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} -```ts import * as React from 'react'; import * as ReactDOM from "react-dom"; import './App.css'; @@ -83,7 +113,9 @@ function App() { ); } export default App; -``` + +{% endhighlight %} +{% endtabs %} ## Run the application diff --git a/ej2-react/block-editor/accessibility.md b/ej2-react/block-editor/accessibility.md index d74f4039f3..0b2eccea23 100644 --- a/ej2-react/block-editor/accessibility.md +++ b/ej2-react/block-editor/accessibility.md @@ -16,15 +16,15 @@ The accessibility compliance for the Block Editor component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) |
|
-| [Section 508 Support](../common/accessibility#accessibility-standards) |
|
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | 
|
-| [Color Contrast](../common/accessibility#color-contrast) | 
|
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
+| [WCAG 2.2 Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#accessibility-standards) | |
+| [Section 508 Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#accessibility-standards) | |
+| [Screen Reader Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#screen-reader-support) | |
+| [Right-To-Left Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#right-to-left-support) | |
+| [Color Contrast](https://ej2.syncfusion.com/react/documentation/common/accessibility#color-contrast) | |
+| [Mobile Device Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#mobile-device-support) | |
+| [Keyboard Navigation Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#keyboard-navigation-support) | |
+| [Accessibility Checker Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | |
+| [Axe-core Accessibility Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | |
+
+
+
+ ++ + +Loading....+
- Weekly Release
diff --git a/ej2-react/3d-chart/appearance.md b/ej2-react/3d-chart/appearance.md
index 5e64623fd4..6e7d1d0aab 100644
--- a/ej2-react/3d-chart/appearance.md
+++ b/ej2-react/3d-chart/appearance.md
@@ -127,18 +127,18 @@ The 3D chart can be rotated by using the [`enableRotation`](https://helpej2.sync
## Title
-The 3D chart can be given a title by using [`title`](https://helpej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property, to show the information about the data plotted.
+You can add a title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/3d-chart/appearance/appearance-cs8/app/index.jsx %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/3d-chart/appearance/appearance-cs8/app/index.tsx %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.tsx %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/3d-chart/appearance/appearance-cs8" %}
+{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs3" %}
### Title position
diff --git a/ej2-react/3d-chart/getting-started.md b/ej2-react/3d-chart/getting-started.md
index 4585e29ba7..05009b7a86 100644
--- a/ej2-react/3d-chart/getting-started.md
+++ b/ej2-react/3d-chart/getting-started.md
@@ -1,8 +1,8 @@
---
layout: post
title: Getting started with React 3D Chart component | Syncfusion
-description: Checkout and learn about Getting started with React 3D Chart component of Syncfusion Essential JS 2 and more details.
-control: Getting started
+description: Check out and learn about the Getting started with the React 3D Chart component of Syncfusion Essential JS 2 and more details.
+control: Getting started
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
@@ -10,15 +10,19 @@ domainurl: ##DomainURL##
# Getting started with React 3D Chart component
-This section describes the steps to create a simple 3D Chart and demonstrates the basic usage of the 3D Chart component.
+This section describes the steps to create a simple 3D Chart component and demonstrates its basic usage.
A quick video overview of the React 3D Charts setup is available:
{% youtube "https://www.youtube.com/watch?v=S3SPJYF4Fw8" %}
+## Prerequisites
+
+Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement). That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.
+
## Dependencies
-Below is the list of minimum dependencies required to use the 3D Chart component.
+When you install `@syncfusion/ej2-react-charts`, the following dependent packages are installed automatically:
```
|-- @syncfusion/ej2-react-charts
@@ -30,89 +34,55 @@ Below is the list of minimum dependencies required to use the 3D Chart component
|-- @syncfusion/ej2-svg-base
```
-Once you install `@syncfusion/ej2-react-charts`, the other required dependencies will be installed automatically along with the main package.
+## Set up a development environment
-## Installation and configuration
+To set up a React application quickly, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up the environment using JavaScript and optimizes applications for production.
-### Create a React application
+> As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app). For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
-To easily set up a React application, use the Vite CLI (`npm create vite`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like [`create-react-app`](https://github.com/facebook/create-react-app). For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+To create a new React application, run one of the following commands based on your preferred language:
-> **Note:** To create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+**React with JavaScript**
-To create a new React application, run the following command.
+```
+npm create vite@latest my-app -- --template react
+```
+
+**React with TypeScript**
-```bash
-npm create vite@latest my-app
+```
+npm create vite@latest my-app -- --template react-ts
```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+During the setup process, the CLI will prompt you for a few configuration options. Select the following:
-
+- **Which linter to use?** → **ESLint**
+- **Install with npm and start now?** → **Yes**
-To set up a React application in TypeScript environment, run the following command.
+Selecting **Yes** automatically installs the project dependencies and starts the development server.
-```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
-```
+After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.
-To set up a React application in JavaScript environment, run the following command.
+Then, navigate to the project directory:
-```bash
-npm create vite@latest my-app -- --template react
+```
cd my-app
-npm run dev
```
-### Install Syncfusion® 3D Chart package
+## Install the Syncfusion® React 3D Chart package
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
+All Syncfusion Essential® JS 2 packages are published to the [npm registry](https://www.npmjs.com/~syncfusionorg).
-To install the Syncfusion® 3D Chart package, use the following command
+Install the React 3D Chart package using the following command:
```bash
-npm install @syncfusion/ej2-react-charts --save
+npm install @syncfusion/ej2-react-charts
```
-> The –save will instruct NPM to include the 3D Chart package inside of the **dependencies** section of the package.json.
-
-## Add 3D Chart to the project
+## Add the 3D Chart component to the project
Add the 3D Chart component to `src/App.tsx` using the following code.
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-
-import { Chart3DComponent } from '@syncfusion/ej2-react-charts';
-import * as React from 'react';
-function App() {
- return (