diff --git a/components/charts/README.md b/components/charts/README.md index 7374a766..29bba234 100644 --- a/components/charts/README.md +++ b/components/charts/README.md @@ -1,17 +1,17 @@ # React Charts Components -The [React Chart](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) component is a well-crafted charting component for visualizing data with 50+ charts and graphs, ranging from line to financial types. It can bind data from datasource such as array of JSON objects, `OData web services` or [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/). All chart elements are rendered using Scalable Vector Graphics (SVG). +The [React Charts](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) component is a well-crafted charting component for visualizing data with 55+ charts and graphs, ranging from line to financial types. It can bind data from datasource such as array of JSON objects, `OData web services` or [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm). All chart elements are rendered using Scalable Vector Graphics (SVG). ## What's Included in the React Charts Package -The [React Charts](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) package includes the following list of components. +The React Charts package includes the following list of components. ### React Chart -The [React Chart Component](https://www.syncfusion.com/react-components/react-charts) is a feature-rich chart component with built-in support for over 50 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. +The [React Charts](https://www.syncfusion.com/react-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) is a feature-rich chart component with built-in support for over 55 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.

- Getting started . + Getting started . Online demos . Learn more

@@ -22,41 +22,41 @@ The [React Chart Component](https://www.syncfusion.com/react-components/react-ch #### Key Features -* Chart types: Supports 50+ interactive chart types starting from line to financial chart. Few chart types include: - * [React Area Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-area-charts-npm) - * [React Bar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-bar-charts-npm) - * [React Line Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-line-charts-npm) - * [React Spline Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-spline-charts-npm) - * [React Bubble Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-bubble-charts-npm) - * [React Scatter Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-scatter-charts-npm) - * [React Step Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-step-charts-npm) - * [React Polar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-polar-npm) - * [React Radar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-radar-npm) - * [React Range Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-range-charts-npm) - * [React Stacked Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-stacked-charts-npm) +* Chart types: Supports 55+ interactive chart types starting from line to financial chart. Few chart types include: + * [React Area Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Bar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/bar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Line Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/line-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Spline Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/spline-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Bubble Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/bubble-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Scatter Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/scatter-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Step Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/stepline-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Polar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/polar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Radar Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/radar-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Range Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Stacked Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/range-area-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) * [React Box Plot Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/box-and-whisker-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) * [React Histogram Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/histogram-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) - * [React Financial Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-stock-charts-npm) -* [Data binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/local-data): Bind the Chart component with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data. -* [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/numeric-axis): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string. -* [Rendering modes](https://ej2.syncfusion.com/react/documentation/chart/render-methods/): Supports two type of rendering - SVG and Canvas. By default chart rendered in SVG, You can easily switch between the two simple configuration. -* [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/datalabel-template): Supports data label to annotate points with label to improve the readability of data. -* [Annotation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/annotation): Provides support to mark any specific area of interest by adding custom element. -* [Zooming and panning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/zoom): Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming. -* [Crosshair & trackball](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/crosshair): Provides options to track data points closer to the mouse position or touch action. -* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/selection): Allows you to select any data point or subset of points using selection feature. -* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export): Provides the options to Export the chart to PDF, SVG and CSV formats. -* [RTL support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/rtl): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left. -* [Appearance](https://ej2.syncfusion.com/react/documentation/chart/chart-appearance/): Colors for the charts are picked by the built-in theme, but each element of the chart can be customized by simple configuration options. -* [Accessibility](https://ej2.syncfusion.com/react/documentation/chart/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=react-chart-npm#wai-aria): Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the chart can be effectively used with assistive technologies such as screen readers. -* [Localization](https://ej2.syncfusion.com/react/documentation/chart/localization/?utm_source=npm&utm_medium=listing&utm_campaign=react-chart-npm#localization): The Localization library enables you to adapt the default text content of the chart to fit the language and cultural preferences of your target audience. + * [React Financial Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [Data binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/local-data): Bind the Chart component with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data. +* [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/numeric-axis): Supports multiple axes, and able to plot different data such as numbers, datetime, logarithmic and string. +* [Rendering modes](https://ej2.syncfusion.com/react/documentation/chart/render-methods?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm): Supports two type of rendering - SVG and Canvas. By default chart rendered in SVG, You can easily switch between the two simple configuration. +* [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/datalabel-template): Supports data label to annotate points with label to improve the readability of data. +* [Annotation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/annotation): Provides support to mark any specific area of interest by adding custom element. +* [Zooming and panning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/zoom): Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming. +* [Crosshair & trackball](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/crosshair): Provides options to track data points closer to the mouse position or touch action. +* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/selection): Allows you to select any data point or subset of points using selection feature. +* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/export): Provides the options to Export the chart to PDF, SVG and CSV formats. +* [RTL support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/rtl): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left. +* [Appearance](https://ej2.syncfusion.com/react/documentation/chart/chart-appearance?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm): Colors for the charts are picked by the built-in theme, but each element of the chart can be customized by simple configuration options. +* [Accessibility](https://ej2.syncfusion.com/react/documentation/chart/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#wai-aria): Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the chart can be effectively used with assistive technologies such as screen readers. +* [Localization](https://ej2.syncfusion.com/react/documentation/chart/localization?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#localization): The Localization library enables you to adapt the default text content of the chart to fit the language and cultural preferences of your target audience. ### React Accumulation Chart Built-in support for pie, doughnut, pyramid and funnel series type, to show the proportions and percentages between the categories.

- Getting started . + Getting started . Online demos . Learn more

@@ -68,22 +68,22 @@ The [React Chart Component](https://www.syncfusion.com/react-components/react-ch #### Key features * Chart types: Supports Pie, Doughnut, Pyramid and Funnel charts. - * [React Pie Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-pie-charts-npm) - * [React Doughnut Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-donut-charts-npm) - * [React Pyramid Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/pyramid-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-pyramid-charts-npm) - * [React Funnel Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-funnel-charts-npm) -* [Smart labels](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smartlabels): Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range. -* [Grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/grouping): Supports grouping of data points based on value and point count. -* [Semi-pie](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/semi-pie): Provides options to customize the start and end angle of the pie chart. -* [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-legend): Provides options to display additional information about the points with the help of legend. -* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/chart/default-pie): Provides great user experiance by including a set of interactive features such as tooltip, drill-down, events, and selection. + * [React Pie Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/pie-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Doughnut Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/donut-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Pyramid Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/pyramid-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) + * [React Funnel Chart](https://www.syncfusion.com/react-components/react-charts/chart-types/funnel-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [Smart labels](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/smartlabels): Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range. +* [Grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/grouping): Supports grouping of data points based on value and point count. +* [Semi-pie](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/semi-pie): Provides options to customize the start and end angle of the pie chart. +* [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/pie-legend): Provides options to display additional information about the points with the help of legend. +* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/chart/default-pie): Provides great user experiance by including a set of interactive features such as tooltip, drill-down, events, and selection. ### React Stock Chart - The [React Stock Chart Component](https://www.syncfusion.com/react-components/react-stock-chart) is a well-crafted, easy-to-use financial charting package to track and visualize stock price of any company over a specific period using charting and range tools. + The [React Stock Chart Component](https://www.syncfusion.com/react-components/react-stock-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) is a well-crafted, easy-to-use financial charting package to track and visualize stock price of any company over a specific period using charting and range tools.

- Getting started . + Getting started . Online demos . Learn more

@@ -94,22 +94,22 @@ The [React Chart Component](https://www.syncfusion.com/react-components/react-ch #### Key features -* [Data binding](https://ej2.syncfusion.com/react/documentation/stock-chart/working-with-data/): Bind the stock chart component with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data. -* [Range selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/disabled-period): Supports range selector to filter a date range for data that needs to be visualized. -* [Period selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/disabled-navigator): Supports period selector to select predefined periods just by a single click. -* [Technical indicators](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/default): Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest. -* [Trendlines](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/default): Predicts the future trends with predetermined data for any measurements. -* [Stock events](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/stock-events): Supports stock events to show different kinds of market events on the chart. -* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/multi-pane): Provides the options to Export the stock chart to PDF, SVG and CSV formats. -* [Appearance](https://ej2.syncfusion.com/react/documentation/stock-chart/appearance/): Colors for the stock chart are picked by the built-in theme, but each element of the stock chart can be customized by simple configuration options. -* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=stockchart#/material/stock-chart/multi-pane): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball. +* [Data binding](https://ej2.syncfusion.com/react/documentation/stock-chart/working-with-data?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm): Bind the stock chart component with an array of JSON objects or DataManager. Other than chart series, data label and tooltip can also bound to your data. +* [Range selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default): Supports range selector to filter a date range for data that needs to be visualized. +* [Period selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/disabled-navigator): Supports period selector to select predefined periods just by a single click. +* [Technical indicators](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default): Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest. +* [Trendlines](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default): Predicts the future trends with predetermined data for any measurements. +* [Stock events](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default): Supports stock events to show different kinds of market events on the chart. +* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default): Provides the options to Export the stock chart to PDF, SVG and CSV formats. +* [Appearance](https://ej2.syncfusion.com/react/documentation/stock-chart/appearance?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm): Colors for the stock chart are picked by the built-in theme, but each element of the stock chart can be customized by simple configuration options. +* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/stock-chart/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball. ### React Range Navigator - The [React Chart Component](https://www.syncfusion.com/react-components/react-range-selector) is an interface for selecting a small range from a large collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized. + The [React Chart Component](https://www.syncfusion.com/react-components/react-range-selector?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) is an interface for selecting a small range from a large collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.

- Getting started . + Getting started . Online demos . Learn more

@@ -120,19 +120,19 @@ The [React Chart Component](https://www.syncfusion.com/react-components/react-ch #### Key features -* [Data sources](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=range-navigator#/material/range-navigator/stock-chart): Bind the range navigator component with an array of JSON objects or DataManager. -* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and animation. -* [Lightweight](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device. -* [Period-selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/period-selector): Provides options to select the data over the custom period. -* [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=chart#/material/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string. +* [Data sources](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/range-navigator/stock-chart): Bind the range navigator component with an array of JSON objects or DataManager. +* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/range-navigator/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and animation. +* [Lightweight](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/range-navigator/light-weight): Supports light-weight range navigator to load in mobile device. +* [Period-selector](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/range-navigator/period-selector): Provides options to select the data over the custom period. +* [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/range-navigator/date-time): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string. ### React Sparkline - The [React Sparkline Component](https://www.syncfusion.com/react-components/react-sparkline) is a very small chart control drawn without axes or coordinates. The sparklines are easy to interpret and convey more information to users by visualizing data in a small amount of space. + The [React Sparkline Component](https://www.syncfusion.com/react-components/react-sparkline?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) is a very small chart control drawn without axes or coordinates. The sparklines are easy to interpret and convey more information to users by visualizing data in a small amount of space.

- Getting started . + Getting started . Online demos . Learn more

@@ -143,18 +143,18 @@ The [React Chart Component](https://www.syncfusion.com/react-components/react-ch #### Key features -* [Series types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/series-types): Supports five types of sparklines : line, area, column, win loss, and pie to show data trends. -* [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/axis-types): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string. -* [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/customization): Supports data label to annotate points with label to improve the readability of data. -* [Range band](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/range-band): Provides options to highlight specific range of values. -* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=sparkline#/material/sparkline/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball. +* [Series types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/sparkline/series-types): Supports five types of sparklines : line, area, column, win loss, and pie to show data trends. +* [Axis types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/sparkline/axis-types): Supports multiple axis and able to plot different data such as numbers, datetime, logarithmic and string. +* [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/sparkline/customization): Supports data label to annotate points with label to improve the readability of data. +* [Range band](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/sparkline/range-band): Provides options to highlight specific range of values. +* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/sparkline/default): Provides great user experiance by including a set of interactive features such as tooltip, events, and trackball. ### React Bullet Chart -The [React Bullet Chart Component](https://www.syncfusion.com/react-components/react-bullet-chart) is an interface to visually compare measures, similar to the commonly used bar chart. A bullet chart displays one or more measures and compares them with a target value. +The [React Bullet Chart Component](https://www.syncfusion.com/react-components/react-bullet-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) is an interface to visually compare measures, similar to the commonly used bar chart. A bullet chart displays one or more measures and compares them with a target value.

- Getting started . + Getting started . Online demos . Learn more

@@ -165,17 +165,17 @@ The [React Bullet Chart Component](https://www.syncfusion.com/react-components/r #### Key features -* [Multiple measures](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/multiple-data): Provides options to render multiple measure bars as well as multiple target bars to allow comparison of several measures at once. -* [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/bullet-legend): Provides options to display additional information about the target and actual bar. -* [RTL support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/right-to-left): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left. -* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=bulletchart#/material/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover. +* [Multiple measures](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/bullet-chart/multiple-data): Provides options to render multiple measure bars as well as multiple target bars to allow comparison of several measures at once. +* [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/bullet-chart/bullet-legend): Provides options to display additional information about the target and actual bar. +* [RTL support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/bullet-chart/right-to-left): Provides a full-fledged right-to-left mode which aligns axis, tooltip, legend and data in the chart component from right to left. +* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/bullet-chart/tooltip): Provides options to display additional information about target and actual on mouse hover. ### React Smith Chart -The [React Smith Chart Component](https://www.syncfusion.com/react-components/react-smith-chart) visualize data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines. +The [React Smith Chart Component](https://www.syncfusion.com/react-components/react-smith-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) visualize data of high frequency circuit applications. It contains two sets of circles to plot parameters of transmission lines.

- Getting started . + Getting started . Online demos . Learn more

@@ -186,17 +186,17 @@ The [React Smith Chart Component](https://www.syncfusion.com/react-components/re #### Key features -* [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/default): Provides options to display additional information about the series. -* [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/custom): Supports data label to annotate points with label to improve the readability of data. -* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/custom): Provides options to display additional information about data points on mouse hover. -* [Print and Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=smithchart#/material/smith-chart/print-export): Provides support to print and export the rendered smith chart for future use. +* [Legend](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/smith-chart/default): Provides options to display additional information about the series. +* [Data label](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/smith-chart/custom): Supports data label to annotate points with label to improve the readability of data. +* [Tooltip](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/smith-chart/custom): Provides options to display additional information about data points on mouse hover. +* [Print and Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/bootstrap5/smith-chart/print-export): Provides support to print and export the rendered smith chart for future use. ## Setup ### Create a React Application -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command. +You can use [`create-react-app`](https://github.com/react/create-react-app) to setup applications. To create React app use the following command. ```bash npx create-react-app my-app --template typescript @@ -247,42 +247,42 @@ export default App; Chart components are offered in following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)     | [](https://www.syncfusion.com/angular-components/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
       [Angular](https://www.syncfusion.com/angular-components/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples -* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/default) +* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm#/default) ## Resources -* [Documentation](https://ej2.syncfusion.com/react/documentation/chart/getting-started) -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [Documentation](https://ej2.syncfusion.com/react/documentation/chart/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/ai-coding-assistant/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) ## Support Product support is available through following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) * Live chat ## Changelog -Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/charts/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates. +Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/charts/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm). To acquire a license for 150+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/react?tag=es-seo-react-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. -See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license) for more info. +See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-charts-npm) for more info. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. \ No newline at end of file diff --git a/components/diagrams/README.md b/components/diagrams/README.md index a7ae30ff..e524d4bc 100644 --- a/components/diagrams/README.md +++ b/components/diagrams/README.md @@ -1,11 +1,11 @@ # React Diagram Component -The [React Diagram](https://www.syncfusion.com/react-components/react-diagram?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) component is used for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, floor plans, UML diagrams, and BPMN charts either through code or a visual interface. +The [React Diagram](https://www.syncfusion.com/diagram-sdk/react-diagram?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) component is used for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, floor plans, UML diagrams, and BPMN charts either through code or a visual interface.

- Getting started . + Getting started . Online demos . - Learn more + Learn more

@@ -23,7 +23,7 @@ Trusted by the world's leading companies ### Create a React Application -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command. +You can use [`create-react-app`](https://github.com/react/create-react-app) to setup applications. To create React app use the following command. ```bash npx create-react-app my-app --template typescript @@ -116,61 +116,61 @@ export default App; Diagram component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)     | [](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Use case demos -* [React Diagram Builder demo](https://ej2.syncfusion.com/showcase/react/diagrambuilder/) -* [React Organizational Chart demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/organization-model) -* [React Mind Map demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/mind-map) -* [React BPMN Editor demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/bpmn-editor) -* [React Logic Circuit Diagram demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/logic-circuit) -* [React UML Activity Diagram demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/activity) -* [React Network Diagram demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/network-diagram) -* [React UML Class Diagram demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/activity-class) -* [React Venn Diagram demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/venn-diagram) -* [React Fishbone Diagram demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/fishbone-diagram) +* [React Diagram Builder demo](https://ej2.syncfusion.com/showcase/react/diagrambuilder/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) +* [React Organizational Chart demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/organization-model) +* [React Mind Map demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/mind-map) +* [React BPMN Editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/bpmn-editor) +* [React Logic Circuit Diagram demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/logic-circuit) +* [React UML Activity Diagram demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/activity) +* [React Network Diagram demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/network-diagram) +* [React UML Class Diagram demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/activity-class) +* [React Venn Diagram demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/venn-diagram) +* [React Fishbone Diagram demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/fishbone-diagram) ## Key features -* [Nodes](https://ej2.syncfusion.com/react/demos/#/material/diagram/getting-started-node) - Nodes are used to host graphical objects (path or controls) that can be arranged and manipulated on a diagram page. Many predefined standard shapes are included. Custom shapes can also be created and added easily. -* [Connectors](https://ej2.syncfusion.com/react/demos/#/material/diagram/connector) - The relationship between two nodes is represented using a connector. -* [Labels](https://ej2.syncfusion.com/react/demos/#/material/diagram/getting-started-annotation) - Labels are used to annotate nodes and connectors. -* [Ports](https://ej2.syncfusion.com/react/demos/#/material/diagram/port) - Ports act as the connection points of the node and allows to create connections with only those specific points. -* [Interactive features](https://ej2.syncfusion.com/react/demos/#/material/diagram/drawing-tool) - Interactive features are used to improve the run time editing experience of a diagram. -* [Data binding](https://ej2.syncfusion.com/react/demos/#/material/diagram/local-data) - Generates diagram with nodes and connectors based on the information provided from an external data source. -* [Commands](https://ej2.syncfusion.com/react/demos/#/material/diagram/key-board-functions) - Supports a set of predefined commands that helps edit the diagram using keyboard. It is also possible to configure new commands and key combinations. -* [Automatic layout](https://ej2.syncfusion.com/react/demos/#/material/diagram/hierarchical-model) - Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organizational chart layout, hierarchical tree layout, symmetric layout, radial tree layout, and mind map layout. -* [Overview panel](https://ej2.syncfusion.com/react/demos/#/material/diagram/overview) - The overview panel is used to improve navigation experience when exploring large diagrams. -* [SymbolPalettes](https://ej2.syncfusion.com/react/demos/#/material/diagram/symbol-palette) - The symbol palette is a gallery of reusable symbols and nodes that can be dragged and dropped on the surface of a diagram. -* [Rulers](https://ej2.syncfusion.com/react/demos/#/material/diagram/drawing-tool) - The ruler provides horizontal and vertical guides for measuring diagram objects in diagram component. -* [Serialization](https://ej2.syncfusion.com/react/demos/#/material/diagram/serialization) - When saved in JSON format a diagram’s state persists, and then it can be loaded back using serialization. -* [Exporting and Printing](https://ej2.syncfusion.com/react/demos/#/material/diagram/print-export) - Diagrams can be exported as .png, .jpeg, .bmp, and .svg image files, and can also be printed as documents. -* [Gridlines](https://ej2.syncfusion.com/react/demos/#/material/diagram/default-functionalities) - Gridlines are the pattern of lines drawn behind diagram elements. It provides a visual guidance while dragging or arranging the objects on a diagram surface. -* [Page layout](https://ej2.syncfusion.com/react/demos/#/material/diagram/print-export)- The drawing surface can be configured to page-like appearance using page size, orientation, and margins. -* [Context menu](https://ej2.syncfusion.com/react/demos/#/material/diagram/key-board-functions) - Frequently used commands can easily be mapped to the context menu. +* [Nodes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/getting-started-node) - Nodes are used to host graphical objects (path or controls) that can be arranged and manipulated on a diagram page. Many predefined standard shapes are included. Custom shapes can also be created and added easily. +* [Connectors](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/connector) - The relationship between two nodes is represented using a connector. +* [Labels](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/getting-started-annotation) - Labels are used to annotate nodes and connectors. +* [Ports](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/port) - Ports act as the connection points of the node and allows to create connections with only those specific points. +* [Interactive features](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/drawing-tool) - Interactive features are used to improve the run time editing experience of a diagram. +* [Data binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/local-data) - Generates diagram with nodes and connectors based on the information provided from an external data source. +* [Commands](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/key-board-functions) - Supports a set of predefined commands that helps edit the diagram using keyboard. It is also possible to configure new commands and key combinations. +* [Automatic layout](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/hierarchical-model) - Automatic layouts are used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organizational chart layout, hierarchical tree layout, symmetric layout, radial tree layout, and mind map layout. +* [Overview panel](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/overview) - The overview panel is used to improve navigation experience when exploring large diagrams. +* [SymbolPalettes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/symbol-palette) - The symbol palette is a gallery of reusable symbols and nodes that can be dragged and dropped on the surface of a diagram. +* [Rulers](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/drawing-tool) - The ruler provides horizontal and vertical guides for measuring diagram objects in diagram component. +* [Serialization](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/serialization) - When saved in JSON format a diagram’s state persists, and then it can be loaded back using serialization. +* [Exporting and Printing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/print-export) - Diagrams can be exported as .png, .jpeg, .bmp, and .svg image files, and can also be printed as documents. +* [Gridlines](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/default-functionalities) - Gridlines are the pattern of lines drawn behind diagram elements. It provides a visual guidance while dragging or arranging the objects on a diagram surface. +* [Page layout](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/print-export)- The drawing surface can be configured to page-like appearance using page size, orientation, and margins. +* [Context menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm#/bootstrap5/diagram/key-board-functions) - Frequently used commands can easily be mapped to the context menu. ## Support Product support is available through the following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) * Live chat ## Changelog -Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/diagrams/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates. +Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/diagrams/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm). To acquire a license for 80+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/diagram-sdk?tag=es-seo-diagram-sdk-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. -See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=diagram) for more info. +See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-diagram-npm) for more info. © Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. diff --git a/components/documenteditor/README.md b/components/documenteditor/README.md index 7a9deda6..30e615be 100644 --- a/components/documenteditor/README.md +++ b/components/documenteditor/README.md @@ -1,15 +1,15 @@ # React DOCX Editor Component -The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) component is a feature rich UI component with document editing capabilities like Microsoft Word. Also known as the document editor, it is used to create, edit, view, and print Word documents. It provides all the common Word processing features including editing text, formatting content, resizing images and tables, finding and replacing text, bookmarks, tables of contents, track changes, commenting, restrict editing, printing, importing and exporting Word documents. +The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) component is a feature rich UI component with document editing capabilities like Microsoft Word. Also known as the document editor, it is used to create, edit, view, and print Word documents. It provides all the common Word processing features including editing text, formatting content, resizing images and tables, finding and replacing text, bookmarks, tables of contents, track changes, commenting, restrict editing, printing, importing and exporting Word documents. -An example [DOCX Editor server-side Web API projects for ASP.NET MVC, ASP.NET Core, and Java is available in GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) which contains all the mandatory Web APIs for opening Word documents, paste with formatting, restrict editing, spell-checking, and saving documents other than SFDT/DOCX format. Apart from these operations, all the user interactions and editing operations run purely in the client-side provides much faster editing experience to the users. +An example [DOCX Editor server-side Web API projects for ASP.NET MVC, ASP.NET Core, and Java is available in GitHub](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) which contains all the mandatory Web APIs for opening Word documents, paste with formatting, restrict editing, spell-checking, and saving documents other than SFDT/DOCX format. Apart from these operations, all the user interactions and editing operations run purely in the client-side provides much faster editing experience to the users. -Syncfusion provides a predefined [DOCX Editor server docker image](https://hub.docker.com/r/syncfusion/word-processor-server?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) targeting ASP.NET Core 2.1 framework. You can directly pull this docker image and deploy it in server on the go. You can also create own docker image by customizing the existing [docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm). +Syncfusion provides a predefined [DOCX Editor server docker image](https://hub.docker.com/r/syncfusion/word-processor-server?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) targeting ASP.NET Core 2.1 framework. You can directly pull this docker image and deploy it in server on the go. You can also create own docker image by customizing the existing [docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm).

- Getting Started . - Online demos . - Learn more + Getting Started . + Online demos . + Learn more

@@ -74,32 +74,32 @@ function App() { export default App; ``` -> The web API ('https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/') is created specifically for our online demos. You should host web API on your side, refer the [web service documentation](https://help.syncfusion.com/document-processing/word/word-processor/react/web-services/core?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) for more information. +> The web API ('https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/') is created specifically for our online demos. You should host web API on your side, refer the [web service documentation](https://help.syncfusion.com/document-processing/word/word-processor/react/web-services/core?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) for more information. ## Supported frameworks The React DOCX Editor (Document Editor) component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-docx-editor?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-docx-editor?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)
     [JavaScript](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)     | [](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)
       [Angular](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)       | [](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)
       [Vue](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)          | [](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)
  [ASP.NET Core](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)   | [](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)
  [ASP.NET MVC](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-docx-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples -* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm#/default) +* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm#/default) * Fitness Tracker - [Source](https://github.com/SyncfusionExamples/showcase-react-health-tracker-dashboard-demo), [Live Demo](https://ej2.syncfusion.com/showcase/react/fitness-tracker-app/) ## Key features -* [Document Authoring](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm#/tailwind3/document-editor/default) - Allows to create a document with supported elements and formatting options. +* [Document Authoring](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm#/tailwind3/document-editor/default) - Allows to create a document with supported elements and formatting options. * Supported elements - Supports document elements like text, inline image, table, hyperlink, fields, bookmark, table of contents, footnote and endnote, section, header, and footer. * Styles - Supports character and paragraph styles. * Editing - Supports all the common editing and formatting operations. * History - Supports options to perform undo redo operations. * Find and replace - Provides support to find and replace text within the document. - * [Track changes](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm#/tailwind3/document-editor/track-changes) - Suppports tracking the content insertion and deletion. - * [Commenting](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm#/tailwind3/document-editor/comments) - Supports adding a comment, replying to an existing comment or mark as resolved and more. - * [Form filling](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm#/tailwind3/document-editor/form-fields) - Supports designing fillable forms in Word document and fill the forms. - * [Restrict editng](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm#/tailwind3/document-editor/document-protection) - Supports restricting edit permission for a region in Word document and control what type of changes can be made to the document. + * [Track changes](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm#/tailwind3/document-editor/track-changes) - Suppports tracking the content insertion and deletion. + * [Commenting](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm#/tailwind3/document-editor/comments) - Supports adding a comment, replying to an existing comment or mark as resolved and more. + * [Form filling](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm#/tailwind3/document-editor/form-fields) - Supports designing fillable forms in Word document and fill the forms. + * [Restrict editng](https://document.syncfusion.com/demos/docx-editor/react/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm#/tailwind3/document-editor/document-protection) - Supports restricting edit permission for a region in Word document and control what type of changes can be made to the document. * Export - Provides the options to export the documents in the client-side as `Syncfusion Document Text (*.sfdt)` and `Word document (*.docx)`. With server-side library, exporting as other formats can be achieved. * Import - Provides the options to import the native `Syncfusion Document Text (*.sfdt)` format documents in the client-side. With server-side library, importing other formats can be achieved. * Print - Provides the options to print the documents. @@ -111,32 +111,32 @@ The React DOCX Editor (Document Editor) component is also offered in the followi ## Resources -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/docx-editor-sdk?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/docx-editor-sdk) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/docx-editor-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/docx-editor-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) ## Support Product support is available through the following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support -* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) +* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) * [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) -* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) +* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) * Live chat ## Changelog -Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates. +Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/34.1.29/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/docx-editor-sdk?tag=es-seo-docx-editor-sdk-download-trial). > A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. -See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-word-processor-npm) for more info. +See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-docx-editor-npm) for more info. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. \ No newline at end of file diff --git a/components/filemanager/README.md b/components/filemanager/README.md index 2d6f2e30..7f17231c 100644 --- a/components/filemanager/README.md +++ b/components/filemanager/README.md @@ -3,7 +3,7 @@ The [React FileManager](https://www.syncfusion.com/react-components/react-file-manager?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) component is a graphical user interface that allows users to manage their file system in an intuitive and efficient manner. With this component, you can easily access, edit, upload, download, and organize files and folders. It also offers a convenient way to browse and select items from the file system.

- Getting Started . + Getting Started . Online demos . Learn more

@@ -23,7 +23,7 @@ Trusted by the world's leading companies ### Create a React application -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command. +You can use [`create-react-app`](https://github.com/react/create-react-app) to setup applications. To create React app use the following command. ```bash npx create-react-app my-app --template typescript @@ -79,57 +79,57 @@ export default App; The React FileManager component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)     | [](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples -* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-filemanager-npm#/default) +* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/#/default?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) ## Key features * [File and directory management](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#/bootstrap5/file-manager/directory-upload): The component allows users to upload, download, rename, sort, cut, copy, and paste files and directories. -* [Multiple layout options](https://ej2.syncfusion.com/react/documentation/file-manager/user-interface/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#view): The component supports both large icons view and details view layout, giving users the ability to choose the display option that works best for them. +* [Multiple layout options](https://ej2.syncfusion.com/react/documentation/file-manager/user-interface?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#view): The component supports both large icons view and details view layout, giving users the ability to choose the display option that works best for them. * [Multiple file providers](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#/bootstrap5/file-manager/azure-service): The component supports a range of file providers, including Amazon S3, MS Azure, NodeJS, Google file systems, and local physical file providers, giving users flexibility in how they store and access their files. -* [Search functionality](https://ej2.syncfusion.com/react/documentation/file-manager/file-operations/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#search): The component includes a search feature that allows users to easily locate specific files within their file system. +* [Search functionality](https://ej2.syncfusion.com/react/documentation/file-manager/file-operations?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#search): The component includes a search feature that allows users to easily locate specific files within their file system. * [Customizable interface](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#/bootstrap5/file-manager/custom-thumbnail): The component's interface can be customized to fit the needs and preferences of users, allowing for a personalized experience. * [Responsive design](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#/bootstrap5/file-manager/overview): The component is designed to be responsive, ensuring that it works seamlessly across a range of devices and screen sizes. -* [Easy integration](https://ej2.syncfusion.com/react/documentation/file-manager/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component is easy to integrate into existing projects, making it a convenient and straightforward solution for file management. -* [Context menu](https://ej2.syncfusion.com/react/documentation/file-manager/user-interface/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#context-menu): The component includes a context menu that allows users to quickly and easily access file management options. -* [Toolbar](https://ej2.syncfusion.com/react/documentation/file-manager/user-interface/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#toolbar): The component's toolbar provides a flexible way to manage file operations, making it easy for users to perform common tasks. -* [Access control](https://ej2.syncfusion.com/react/documentation/file-manager/access-control/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component allows users to define a set of access rules for their folders and files, giving them control over who can access specific resources. -* [Multiple file selection](https://ej2.syncfusion.com/react/documentation/file-manager/multiple-selection/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component supports the selection of multiple files, making it easy for users to perform bulk operations. -* [Localization](https://ej2.syncfusion.com/react/documentation/file-manager/localization/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component supports localization, allowing it to be used in a variety of languages and regions. -* [Accessibility](https://ej2.syncfusion.com/react/documentation/file-manager/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component is designed with accessibility in mind, ensuring that it is usable by users with disabilities. +* [Easy integration](https://ej2.syncfusion.com/react/documentation/file-manager/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component is easy to integrate into existing projects, making it a convenient and straightforward solution for file management. +* [Context menu](https://ej2.syncfusion.com/react/documentation/file-manager/user-interface?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#context-menu): The component includes a context menu that allows users to quickly and easily access file management options. +* [Toolbar](https://ej2.syncfusion.com/react/documentation/file-manager/user-interface?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm#toolbar): The component's toolbar provides a flexible way to manage file operations, making it easy for users to perform common tasks. +* [Access control](https://ej2.syncfusion.com/react/documentation/file-manager/access-control?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component allows users to define a set of access rules for their folders and files, giving them control over who can access specific resources. +* [Multiple file selection](https://ej2.syncfusion.com/react/documentation/file-manager/multiple-selection?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component supports the selection of multiple files, making it easy for users to perform bulk operations. +* [Localization](https://ej2.syncfusion.com/react/documentation/file-manager/localization?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component supports localization, allowing it to be used in a variety of languages and regions. +* [Accessibility](https://ej2.syncfusion.com/react/documentation/file-manager/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm): The component is designed with accessibility in mind, ensuring that it is usable by users with disabilities. ## Resources -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/ai-coding-assistant/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) ## Support Product support is available through following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) * Live chat ## Changelog -Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/filemanager/CHANGELOG.md?utm_source=npm&utm_campaign=filemanager). Get minor improvements and bug fixes every week to stay up to date with frequent updates. +Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/filemanager/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm). To acquire a license for 150+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/react?tag=es-seo-react-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. -See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_campaign=filemanager) for more info. +See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-file-manager-npm) for more info. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. \ No newline at end of file diff --git a/components/gantt/README.md b/components/gantt/README.md index 2830cd67..68978805 100644 --- a/components/gantt/README.md +++ b/components/gantt/README.md @@ -1,11 +1,11 @@ # React Gantt Component -The [React Gantt](https://www.syncfusion.com/react-components/react-gantt-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) component is a project planning and management tool used to display and manage hierarchical tasks with timeline details. It helps assess how long a project should take, determine the resources needed, manage the dependencies between tasks, and plan the order in which the tasks should be completed. +The [React Gantt](https://www.syncfusion.com/gantt-sdk/react-gantt-chart?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) component is a project planning and management tool used to display and manage hierarchical tasks with timeline details. It helps assess how long a project should take, determine the resources needed, manage the dependencies between tasks, and plan the order in which the tasks should be completed.

- Getting Started . + Getting Started . Online demos . - Learn more + Learn more

@@ -22,7 +22,7 @@ Trusted by the world's leading companies ### Create a React Application -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command. +You can use [`create-react-app`](https://github.com/react/create-react-app) to setup applications. To create React app use the following command. ```bash npx create-react-app my-app --template typescript @@ -101,66 +101,66 @@ export default App; Gantt component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)     | [](https://www.syncfusion.com/angular-components/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples -* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/default) +* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/#/default?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) ## Key features -* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/local-data): Bind hierarchical or self-referential data to Gantt chart with an array of JSON objects or DataManager. -* [Timeline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/timeline): Display timescale from minutes to decades easily, and also display custom texts in the timeline units. Timeline can be displayed in either one-tier or two-tier layout. -* [Task dependency](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/editing): Allows for the definition or update of dependencies between tasks in a project using four types of task dependencies: Finish – Start, Start – Finish, Finish – Finish, and Start – Start. -* [Resources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/resource-view): Visualizes the list of tasks assigned to each resource in hierarchy manner and switch the resources as per user need by task editing. -* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/editing): Provides the options to dynamically insert, delete and update tasks using columns, dialog and taskbar editing options. -* [Virtual scrolling](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/virtual-scroll): Improves the performance of the gantt control when binding large amounts of data by only rendering the currently visible parts of the user interface and rendering other elements as needed while scrolling. -* [Critical path](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/critical-path): The critical path in a project is displayed by a single task or a series of tasks. If a task in critical path is delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task would affect the project end date. -* [Customizable taskbars](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/taskbar-template): Display various tasks in a project using parent and child taskbars, summary taskbars and milestone UI, which can be customized with templates. -* [Unscheduled tasks](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/unscheduled-task): Gantt Chart supports the display of tasks with undefined start date, end date or duration in a project. -* [Baseline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/baseline): Display the deviations between planned dates and actual dates of a task in a project using baselines. -* [Markers and indicators](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/event-markers): Display indicators and flags along with taskbars and task labels. Also map important events in a project using event marker. -* [Task label customization](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/tasklabel-template): Allows for the customization of labels within and on either side of the task bar. -* [Sorting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/sorting-api): Supports n levels of sorting. -* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/filtering): Offers filter UIs such as filter bar and menu at each column to filter data. Also allows for filtering based on related parent or child records. -* [Columns](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/column-menu): Column definitions are used as the dataSource schema in the gantt. This plays a vital role in rendering column values in the required format. Column functionalities such as resizing, reordering, column template, show or hide columns, etc., are supported. -* [Column re-ordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/reorder): Drag any column and drop it at any position in the grid's column header row, to reposition the column. -* [Column resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. -* [Row re-ordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/drag-and-drop): Allows rows to be rearranged through drag and drop actions, changing their position and hierarchy level. A child row can be moved as a sibling within the same parent row or as a child to a different parent row. -* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/selection): Rows or cells can be selected in the Gantt Chart. One or more rows or cells can also be selected by holding Shift, Ctrl or Command, or programmatically. -* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=react-gantt-npm#/bootstrap5/gantt/column-template): Templates can be used to create custom user experiences in the gantt. -* [RTL support](https://ej2.syncfusion.com/react/documentation/gantt/global-local/#right-to-left-rtl): Provides the right-to-left mode which aligns content in the Gantt Chart component from right to left. This improves user experience and accessibility for those who work with RTL languages like Hebrew and Arabic. -* [Localization](https://ej2.syncfusion.com/react/documentation/gantt/global-local/#localization): Provides inherent support to localize the UI. +* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/local-data): Bind hierarchical or self-referential data to Gantt chart with an array of JSON objects or DataManager. +* [Timeline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/timeline): Display timescale from minutes to decades easily, and also display custom texts in the timeline units. Timeline can be displayed in either one-tier or two-tier layout. +* [Task dependency](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/default-editing): Allows for the definition or update of dependencies between tasks in a project using four types of task dependencies: Finish – Start, Start – Finish, Finish – Finish, and Start – Start. +* [Resources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/resource-view): Visualizes the list of tasks assigned to each resource in hierarchy manner and switch the resources as per user need by task editing. +* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/editing): Provides the options to dynamically insert, delete and update tasks using columns, dialog and taskbar editing options. +* [Virtual scrolling](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/virtual-scroll): Improves the performance of the gantt control when binding large amounts of data by only rendering the currently visible parts of the user interface and rendering other elements as needed while scrolling. +* [Critical path](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/critical-path): The critical path in a project is displayed by a single task or a series of tasks. If a task in critical path is delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task would affect the project end date. +* [Customizable taskbars](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/taskbar-template): Display various tasks in a project using parent and child taskbars, summary taskbars and milestone UI, which can be customized with templates. +* [Unscheduled tasks](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/unscheduled-task): Gantt Chart supports the display of tasks with undefined start date, end date or duration in a project. +* [Baseline](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/baseline): Display the deviations between planned dates and actual dates of a task in a project using baselines. +* [Markers and indicators](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/event-markers): Display indicators and flags along with taskbars and task labels. Also map important events in a project using event marker. +* [Task label customization](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/tasklabel-template): Allows for the customization of labels within and on either side of the task bar. +* [Sorting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/sorting-api): Supports n levels of sorting. +* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/filtering): Offers filter UIs such as filter bar and menu at each column to filter data. Also allows for filtering based on related parent or child records. +* [Columns](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/column-menu): Column definitions are used as the dataSource schema in the gantt. This plays a vital role in rendering column values in the required format. Column functionalities such as resizing, reordering, column template, show or hide columns, etc., are supported. +* [Column re-ordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/reorder): Drag any column and drop it at any position in the grid's column header row, to reposition the column. +* [Column resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. +* [Row re-ordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/drag-and-drop): Allows rows to be rearranged through drag and drop actions, changing their position and hierarchy level. A child row can be moved as a sibling within the same parent row or as a child to a different parent row. +* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#/bootstrap5/gantt/selection): Rows or cells can be selected in the Gantt Chart. One or more rows or cells can also be selected by holding Shift, Ctrl or Command, or programmatically. +* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm)#/bootstrap5/gantt/column-template: Templates can be used to create custom user experiences in the gantt. +* [RTL support](https://ej2.syncfusion.com/react/documentation/gantt/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#right-to-left-rtl): Provides the right-to-left mode which aligns content in the Gantt Chart component from right to left. This improves user experience and accessibility for those who work with RTL languages like Hebrew and Arabic. +* [Localization](https://ej2.syncfusion.com/react/documentation/gantt/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm#localization): Provides inherent support to localize the UI. ## Resources -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/ai-coding-assistant/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) ## Support Product support is available through following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) * Live chat ## Changelog -Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/gantt/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates. +Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/gantt/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm). To acquire a license for 150+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/gantt-sdk?tag=es-seo-gantt-sdk-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. -See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license) for more info. +See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-gantt-npm) for more info. -© Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. \ No newline at end of file +© Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/grids/README.md b/components/grids/README.md index 7ab49745..a72503f4 100644 --- a/components/grids/README.md +++ b/components/grids/README.md @@ -1,9 +1,9 @@ # React Data Grid Component -The [React Data Grid](https://www.syncfusion.com/react-ui-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) component is a powerful and flexible tool for displaying and manipulating tabular data. React Data Grid component is its ability to bind to a wide range of data sources, including arrays of JSON objects, `OData web services`, and the Syncfusion® [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). This makes it easy to integrate the grid into your application and display data from a variety of sources. In addition to its data binding capabilities, the React Data Grid also offers support for features such as sorting, filtering, paging, grouping, editing, frozen rows and columns, virtualization, and more. These features allow you to easily manipulate and present large datasets in an efficient and user-friendly way. +The [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) component is a powerful and flexible tool for displaying and manipulating tabular data. React Data Grid component is its ability to bind to a wide range of data sources, including arrays of JSON objects, `OData web services`, and the Syncfusion® [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). This makes it easy to integrate the grid into your application and display data from a variety of sources. In addition to its data binding capabilities, the React Data Grid also offers support for features such as sorting, filtering, paging, grouping, editing, frozen rows and columns, virtualization, and more. These features allow you to easily manipulate and present large datasets in an efficient and user-friendly way.

- Getting Started . + Getting Started . Online demos . Learn more

@@ -21,7 +21,7 @@ Trusted by the world's leading companies ### Create a React Application -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command. +You can use [`create-react-app`](https://github.com/react/create-react-app) to setup applications. To create React app use the following command. ```bash npx create-react-app my-app --template typescript @@ -85,57 +85,57 @@ export default App; Grid component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)     | [](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples -* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/default) +* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/#/default?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) ## Key features -* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/local-binding): Bind data seamlessly with various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). -* [High performance](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/virtualization): Well thought out efforts, and focuses mainly on fast paced performance to load millions of records. Grid renders only the rows within the viewport, and loads additional data as the user scrolls vertically. -* [Adaptive UI layout](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/adaptive-layout): UI is customized and redesigned for great views and usability on small screens. Filter, sort, search, and edit dialogs adaptive to the screen size and render row elements in a vertical direction. -* [Sorting and grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/grouping): Supporting N level of sorting and grouping can be useful for more complex data sets that have a deeper hierarchical structure or that need to be organized and analyzed in more detailed ways. -* [Aggregation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/aggregate-default): Easily visualize the aggregates for column values by calculating and displaying summary statistics such as sums, averages, counts, etc. By default, the aggregate value can be displayed in the footer, group footer, or group caption of the grid. -* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/filtering): The filter UIs, including the filter bar, menu, excel, and checkbox, are available at each column to filter data. -* [Paging](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/paging): Paging is used to view a segment of data from the assigned data source. It requests data on-demand when navigating to another page also allows to change the page size on the fly by using the page size dropdown in the pager. -* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/normaledit): Grid supports create, read, update, and delete operations (CRUD). Also provides various edit modes such as inline, dialog, and batch edit (cell editing). -* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/selection): Select rows or cells either by using checkbox or by simply clicking them. Select more than one row or cell by holding Ctrl or Shift or Command, or simply dragging the pointer over the cells, or programmatically. -* [Hierarchical binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/hierarchy): Allows you to display table data in a hierarchical structure, allowing you to visualize the relationships between parent and child records in a clear and organized way. -* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-template): Using templates, users can create custom UI. It provides various template options to create custom headers, custom cell contents, custom rows, detail rows, toolbars, and custom editors for edit action. -* [Row drag and drop](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/row-drag-and-drop.html): The Grid rows can be reordered while drag and drop the rows within the grid. Also allows to drop the dragged rows another Grid or custom component. +* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/local-binding): Bind data seamlessly with various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). +* [High performance](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/virtualization): Well thought out efforts, and focuses mainly on fast paced performance to load millions of records. Grid renders only the rows within the viewport, and loads additional data as the user scrolls vertically. +* [Adaptive UI layout](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/adaptive-layout): UI is customized and redesigned for great views and usability on small screens. Filter, sort, search, and edit dialogs adaptive to the screen size and render row elements in a vertical direction. +* [Sorting and grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/grouping): Supporting N level of sorting and grouping can be useful for more complex data sets that have a deeper hierarchical structure or that need to be organized and analyzed in more detailed ways. +* [Aggregation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/aggregate-default): Easily visualize the aggregates for column values by calculating and displaying summary statistics such as sums, averages, counts, etc. By default, the aggregate value can be displayed in the footer, group footer, or group caption of the grid. +* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/filtering): The filter UIs, including the filter bar, menu, excel, and checkbox, are available at each column to filter data. +* [Paging](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/paging): Paging is used to view a segment of data from the assigned data source. It requests data on-demand when navigating to another page also allows to change the page size on the fly by using the page size dropdown in the pager. +* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/normaledit): Grid supports create, read, update, and delete operations (CRUD). Also provides various edit modes such as inline, dialog, and batch edit (cell editing). +* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/selection): Select rows or cells either by using checkbox or by simply clicking them. Select more than one row or cell by holding Ctrl or Shift or Command, or simply dragging the pointer over the cells, or programmatically. +* [Hierarchical binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/hierarchy): Allows you to display table data in a hierarchical structure, allowing you to visualize the relationships between parent and child records in a clear and organized way. +* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/column-template): Using templates, users can create custom UI. It provides various template options to create custom headers, custom cell contents, custom rows, detail rows, toolbars, and custom editors for edit action. +* [Row drag and drop](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/row-drag-drop): The Grid rows can be reordered while drag and drop the rows within the grid. Also allows to drop the dragged rows another Grid or custom component. * Columns: The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format. - * [Reordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/reorder): Allows you to rearrange the columns in the grid by dragging and dropping them to a new position in the column header row. - * [Column chooser](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-chooser): It provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. - * [Resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. - * [Frozen rows and columns](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/frozen-rows): Provides the ability to freeze columns and rows to allow for easy scrolling and comparison of cell values. It also offers the option to freeze columns on either the left or right side, or on both sides, of the grid. - * [Cell spanning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-spanning): Grid cells can be spanned across multiple columns or rows in a grid layout to create a larger cell that takes up more space in the grid. - * [Foreign key column binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/foreign-key): A column can display values from external or lookup data sources using foreign key/value mapping. -* [Context menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/context-menu): The context menu provides a list of actions to be performed in the grid. It appears when a grid cell, header, or the pager is right-clicked. -* [Clipboard](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/clipboard): Selected rows and cells can be copied from the grid without header using Ctrl + C or with header using Ctrl + Shift + H shortcut. This allows you to easily transfer data from the grid to other applications or documents as needed. -* [Export to Excel and PDF](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/default-exporting): Provides the options to Export the grid data to Excel, PDF, and CSV formats. -* [RTL support](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#right-to-left---rtl): Provides a full-fledged right-to-left mode which aligns content in the Grid component from right to left. -* [Accessibility](https://ej2.syncfusion.com/react/documentation/grid/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#wai-aria): Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the grid can be effectively used with assistive technologies such as screen readers. -* [Localization](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#localization): The Localization library enables you to adapt the default text content of the grid to fit the language and cultural preferences of your target audience. + * [Reordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/reorder): Allows you to rearrange the columns in the grid by dragging and dropping them to a new position in the column header row. + * [Column chooser](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/column-chooser): It provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. + * [Resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. + * [Frozen rows and columns](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/frozen-rows): Provides the ability to freeze columns and rows to allow for easy scrolling and comparison of cell values. It also offers the option to freeze columns on either the left or right side, or on both sides, of the grid. + * [Cell spanning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/column-spanning): Grid cells can be spanned across multiple columns or rows in a grid layout to create a larger cell that takes up more space in the grid. + * [Foreign key column binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/foreign-key): A column can display values from external or lookup data sources using foreign key/value mapping. +* [Context menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/context-menu): The context menu provides a list of actions to be performed in the grid. It appears when a grid cell, header, or the pager is right-clicked. +* [Clipboard](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/clipboard): Selected rows and cells can be copied from the grid without header using Ctrl + C or with header using Ctrl + Shift + H shortcut. This allows you to easily transfer data from the grid to other applications or documents as needed. +* [Export to Excel and PDF](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/default-exporting): Provides the options to Export the grid data to Excel, PDF, and CSV formats. +* [RTL support](https://ej2.syncfusion.com/react/documentation/grid/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#right-to-left---rtl): Provides a full-fledged right-to-left mode which aligns content in the Grid component from right to left. +* [Accessibility](https://ej2.syncfusion.com/react/documentation/grid/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#wai-aria): Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the grid can be effectively used with assistive technologies such as screen readers. +* [Localization](https://ej2.syncfusion.com/react/documentation/grid/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#localization): The Localization library enables you to adapt the default text content of the grid to fit the language and cultural preferences of your target audience. ## Resources -* [Documentation](https://ej2.syncfusion.com/react/documentation/grid/getting-started) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) +* [Documentation](https://ej2.syncfusion.com/react/documentation/grid/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/ai-coding-assistant/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) ## Support Product support is available through the following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) * Live chat @@ -145,9 +145,9 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). To acquire a license for 150+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/react?tag=es-seo-react-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) for more info. diff --git a/components/pdfviewer/README.md b/components/pdfviewer/README.md index bba17091..48febf36 100644 --- a/components/pdfviewer/README.md +++ b/components/pdfviewer/README.md @@ -3,7 +3,7 @@ The [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) component enables you to view, annotate, prepare and fill forms, and print PDF files from your web applications.

- Getting started . + Getting started . Online demos . Learn more

@@ -23,7 +23,7 @@ Trusted by the world's leading companies ### Create a React Application -You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app use the following command. +You can use [`create-react-app`](https://github.com/react/create-react-app) to setup applications. To create React app use the following command. ```bash npx create-react-app my-app --template typescript @@ -124,38 +124,38 @@ root.render(); PDF Viewer component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-core-pdf-viewer?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-core-pdf-viewer?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-mvc-pdf-viewer?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-mvc-pdf-viewer?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)
     [JavaScript](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)     | [](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)
       [Angular](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)       | [](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)
       [Vue](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)          | [](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-core-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)
  [ASP.NET Core](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-core-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)   | [](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-mvc-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)
  [ASP.NET MVC](https://www.syncfusion.com/pdf-viewer-sdk/asp-net-mvc-pdf-viewer?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Key features -* [View PDF Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) - Open and display both the normal and the protected PDF files with AES and RC4 encryption. -* [Annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/annotation/text-markup-annotation/) - Annotate with text markup, shapes, stamps, ink, and sticky notes. -* [Form Fields](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/form-designer/create-fillable-pdf-forms/create-programmatically/) - Form filling and form designing can be done. -* [Signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/handwritten-signature/) - Hand-written and digital signatures are allowed. -* [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/toolbar/) - Built-in-toolbar and custom toolbars to perform user interaction of PDF Viewer functionalities. -* [Navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/navigation/) - Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and table of contents. -* [Magnification](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/magnification/) - Fit to page, fit to width, and automatic (fits to the visible area). -* [Search](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-search/) - Search a text easily across the PDF document. -* [Core Interactions](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interaction-mode/) - Allows scrolling, zooming, panning, selection, and page navigation. -* [Print](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print/) - Print the entire document or a specific page directly from the browser. -* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/globalization/) - Provides inherent support to localize the UI. +* [View PDF Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Open and display both the normal and the protected PDF files with AES and RC4 encryption. +* [Annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/annotation/text-markup-annotation?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Annotate with text markup, shapes, stamps, ink, and sticky notes. +* [Form Fields](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/forms/form-filling?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Form filling and form designing can be done. +* [Signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/digital-signature/add-digital-signature-react?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Hand-written and digital signatures are allowed. +* [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/toolbar-customization/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Built-in-toolbar and custom toolbars to perform user interaction of PDF Viewer functionalities. +* [Navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and table of contents. +* [Magnification](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/magnification/magnification?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Fit to page, fit to width, and automatic (fits to the visible area). +* [Search](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-search/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Search a text easily across the PDF document. +* [Core Interactions](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interaction-mode?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Allows scrolling, zooming, panning, selection, and page navigation. +* [Print](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Print the entire document or a specific page directly from the browser. +* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/localization/default-language?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Provides inherent support to localize the UI. ## Resources -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/pdf-viewer-sdk?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/pdf-viewer-sdk) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/pdf-viewer-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/pdf-viewer-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) ## Support Product support is available through the following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/pdf-viewer-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/pdf-viewer-sdk?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) * Live chat @@ -165,8 +165,8 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/34.1.29/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/pdf-viewer-sdk?tag=es-seo-pdf-viewer-sdk-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-pdf-viewer-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/richtexteditor/README.md b/components/richtexteditor/README.md index 8fe9dbca..b799349a 100644 --- a/components/richtexteditor/README.md +++ b/components/richtexteditor/README.md @@ -1,12 +1,12 @@ # React Rich Text Editor Component | React Markdown Editor -The [React Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-rich-text-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) is a feature-rich WYSIWYG HTML editor and Markdown editor. The Rich Text Editor is widely used to create blogs, forum posts, notes sections, comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has a variety of tools to edit and format rich content, and it return a valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, media files and lists with modular architectures. +The [React Rich Text Editor](https://www.syncfusion.com/rich-text-editor-sdk/react-rich-text-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) is a feature-rich WYSIWYG HTML editor and Markdown editor. The Rich Text Editor is widely used to create blogs, forum posts, notes sections, comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has a variety of tools to edit and format rich content, and it return a valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, media files and lists with modular architectures.

- 📖Getting started • - 🚀Online demos • - 🌐Learn more + 📖Getting started • + 🚀Online demos • + 🌐Learn more

@@ -96,7 +96,7 @@ export default App; ```

ℹ️ Note:

- For detailed information on module injection and available services, refer to the Syncfusion Rich Text Editor Module Documentation. + For detailed information on module injection and available services, refer to the Syncfusion Rich Text Editor Module Documentation.
### 🧩 Add the Rich Text Editor Component @@ -134,75 +134,67 @@ export default App; Rich Text Editor control is also offered in following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)     | [](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## 🏗️ Showcase samples -* [React HTML editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/tailwind3/rich-text-editor/tools) -* [Blog posting using react rich text editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/tailwind3/rich-text-editor/blog-posting) -* [React Markdown editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/tailwind3/rich-text-editor/markdown-editor) -* [React live HTML editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/tailwind3/rich-text-editor/online-html-editor) +* [React HTML editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/tools) +* [Blog posting using react rich text editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/blog-posting) +* [React Markdown editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/markdown-editor) +* [React live HTML editor demo](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/online-html-editor) ## ✨ Key features -* [AI Assistant](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/ai-assistant) - The AI Assistant helps generate, rewrite, summarize, and refine editor content. It is designed to speed up content creation and improve editing productivity. +* [Edit mode](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/iframe) - HTML content is possible to edit in a `div` element or an `iframe` in the rich text editor. -* [Paste from MS Word](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/paste-cleanup) - Paste from MS Word brings content into the editor with formatting cleanup and structure preservation. It helps users reuse Word content without carrying over unwanted styles. +* [@Mentions](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/mention-integration) - Easily mention users, tags, or items with an autocomplete suggestion list. -* [IFrame](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#/tailwind3/rich-text-editor/iframe) - IFrame mode renders the editor content inside an isolated document context. It helps improve style encapsulation and reduces interference from external page styles. +* [Slash Menu Support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/smart-suggestion) - Quickly insert content blocks using the `/` command. -* [@Mentions](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/mention-integration) - Mentions let users tag people, topics, or items with an autocomplete suggestion list. They make collaboration and inline referencing faster and more accurate. +* [Checklist Suport](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/tools) - Allows users to create checklists (to-do lists) directly within the editor. Users can easily add interactive checkbox items to their content. -* [Slash Menu](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/smart-suggestion) - Slash menu support lets users trigger editor commands by typing a forward slash. It provides a quick way to insert content blocks and formatting actions. +* [Accessibility & WCAG 2.0 Compliance](https://ej2.syncfusion.com/react/documentation/rich-text-editor/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - Ensures full accessibility support, making it user-friendly for people who rely on assistive technologies (AT) or keyboard navigation. -* [Checklist](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/tools) - Checklist support enables users to create interactive task lists in the editor. It is useful for organizing work items and tracking progress within content. +* [Preventing Cross-Site Scripting (XSS)](https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/prevent-cross-site-scripting?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - The Rich Text Editor allows users to edit the content with security by preventing cross-site scripting (XSS). -* [Accessibility & WCAG 2.0 Compliance](https://ej2.syncfusion.com/react/documentation/rich-text-editor/accessibility) - Accessibility support helps the editor work with assistive technologies and keyboard navigation. It ensures the component can be used more effectively by a broader audience. +* [HTML code editing](https://ej2.syncfusion.com/react/documentation/rich-text-editor/code-block?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - The rich text editor allows users to edit the HTML code directly in the HTML code view. -* [Preventing Cross-Site Scripting (XSS)](https://ej2.syncfusion.com/react/documentation/rich-text-editor/validation-security/xhtml-validation#cross-site-scripting-xss-prevention) - XSS protection helps validate and sanitize editor content before it is used or rendered. It reduces security risks by blocking malicious scripts and unsafe markup. +* [Markdown editor](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/markdown-editor-preview) - The rich text editor allows you to edit Markdown content using the Markdown syntax. -* [HTML code editing](https://ej2.syncfusion.com/react/documentation/rich-text-editor/editor-value#source-code-editing) - HTML code editing lets users view and edit the underlying markup directly. It is helpful when precise control over the document structure is required. +* [Markdown content preview](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/markdown-editor-preview) - Preview of the modified Markdown content in the editor, you can give users the ability to see what the formatted content will look like before they save it. -* [Markdown editor](https://ej2.syncfusion.com/react/documentation/rich-text-editor/editor-types/editor-modes#markdown-editor) - Markdown editor mode lets users create and edit content using Markdown syntax. It is ideal for lightweight authoring and text-based workflows. +* [Tools](https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar/toolbar-types?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - The rich text editor handles a wide range of features, including inserting images, hyperlinks, tables, formatting tools, and more. -* [Custom Toolbar Items](https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#toolbar-items) - Custom toolbar items allow additional actions to be added to the editor toolbar. They help tailor the editing experience to specific application needs. +* [Toolbar appearance](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/types) - The rich text editor can provide a fully customizable toolbar that allows users to access the various formatting and editing options that are available. -* [Quick Toolbar](https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar/quick-toolbar) - Quick Toolbar shows contextual actions for selected content such as text, images, and tables. It helps users apply common operations without leaving the editing area. +* [Export and Import](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#/bootstrap5/rich-text-editor/export-document) - Supports exporting content to PDF, and Word formats. -* [File Browser](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/file-browser) - File Browser integration allows users to browse and select files within editor workflows. It supports file-based content management in a more seamless way. +* [Copy and paste](https://ej2.syncfusion.com/react/documentation/rich-text-editor/paste-cleanup?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - Copy and paste from Microsoft Word, Outlook, or other editors or sources while preserving formatting, styles, and structure. -* [Emoji Picker](https://ej2.syncfusion.com/react/documentation/rich-text-editor/smart-editing/emoji-picker) - Emoji picker support lets users insert emojis into the editor content. It helps make messages and content more expressive and engaging. +* [Undo and redo](https://ej2.syncfusion.com/react/documentation/rich-text-editor/undo-redo?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - Users can use undo and redo actions to reverse or repeat actions they took while editing the content. -* [Insert Media](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/insert-media) - Insert Media allows audio and video content to be embedded in the editor. It is useful for creating richer and more interactive documents. +* [Module injection](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#module-injection) - It is possible to create a editor that utilizes a modular library to load the necessary functionality on demand. This can be useful for optimizing the performance of the editor. -* [Toolbar](https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm#toolbar-items) - Toolbar support provides editing controls and customization options for the editor. It supports floating behavior, multiple layout types, and toolbar positioning for flexible UI setups. - -* [Export and Import](https://ej2.syncfusion.com/react/demos/#/tailwind3/rich-text-editor/export-document) - Export and Import support allows content to be moved between the editor and document formats such as PDF and Word. It simplifies content sharing, archiving, and document processing. - -* [Undo and redo](https://ej2.syncfusion.com/react/documentation/rich-text-editor/undo-redo) - Undo and redo support lets users reverse or repeat recent editing actions. It improves editing confidence by making changes easier to correct. - -* [Module injection](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm/#module-injection) - Module injection lets the editor load only the features that are needed. It helps reduce bundle size and keeps the component more efficient. - -* [Third-party integration](https://ej2.syncfusion.com/react/documentation/rich-text-editor/third-party-integration/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - Third-party integration lets the editor work with external libraries and services. It extends the editor with additional capabilities beyond the built-in feature set. +* [Third-party integration](https://ej2.syncfusion.com/react/documentation/rich-text-editor/third-party-integration?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - It is possible to integrate a third-party library into a rich text editor to add additional functionality or features to the editor like `Code-mirror`, `Embedly` and more. ## 📚 Resources -* [Documentation](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started) -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [Documentation](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/ai-coding-assistant/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) ## 🤝 Support Product support is available through the following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support -* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-richtexteditor-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) -* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-richtexteditor-npm) +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) +* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) * Live chat ## 🔄 Change log @@ -211,10 +203,10 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components ## ⚖️ License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/rich-text-editor-sdk?tag=es-seo-rich-text-editor-sdk-download-trial). > A free community [license](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. -See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) for more info. +See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-rich-text-editor-npm) for more info. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution. \ No newline at end of file diff --git a/components/schedule/README.md b/components/schedule/README.md index 3ac9ac6d..62a3f924 100644 --- a/components/schedule/README.md +++ b/components/schedule/README.md @@ -1,11 +1,11 @@ # React Schedule Component -The [React Schedule](https://www.syncfusion.com/react-ui-components/react-scheduler?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) component is an event calendar that facilitates almost all the basic Outlook and Google Calendar features, allowing the user to plan and manage appointments and time efficiently. It receives event data from a variety of data sources, such as an array of JSON objects, OData web services, RESTful or WCF services, and [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/) with built-in load on demand support to reduce the data transfer and load time. Also, it is availed with the multiple resources support that allots an unique individual space for more than one resources on the same calendar. +The [React Schedule](https://www.syncfusion.com/scheduler-sdk/react-scheduler?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) component is an event calendar that facilitates almost all the basic Outlook and Google Calendar features, allowing the user to plan and manage appointments and time efficiently. It receives event data from a variety of data sources, such as an array of JSON objects, OData web services, RESTful or WCF services, and [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) with built-in load on demand support to reduce the data transfer and load time. Also, it is availed with the multiple resources support that allots an unique individual space for more than one resources on the same calendar.

- Getting started . + Getting started . Online demos . - Learn more + Learn more

React Scheduler Component @@ -83,7 +83,7 @@ export default App; Schedule component is also available in the following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)     | [](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples @@ -108,24 +108,24 @@ Schedule component is also available in the following list of frameworks. * [Export to Excel](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm#/bootstrap5/schedule/excel-export) - Provides the options to Export the events to Excel formats. * [Export and Import ICS](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm#/bootstrap5/schedule/calendar-export-import) - Provides the options to Export and Import the events as ICS formats. * [Keyboard interaction](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm#/bootstrap5/schedule/keyboard-interaction) - All the common actions such as traversing through the appointments, multiple cell selection, add/edit/delete the appointments, navigate to other views, dates and much more can be performed through keyboard inputs. -* [Localization](https://ej2.syncfusion.com/react/documentation/schedule/localization.html#localization?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) - All the static text and date content can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the localized language. -* [RTL](https://ej2.syncfusion.com/react/documentation/schedule/localization.html#rtl?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) - Supports displaying the component to display in the direction from right to left. +* [Localization](https://ej2.syncfusion.com/react/documentation/schedule/localization?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) - All the static text and date content can be localized to any desired language. Also, it can be displayed with appropriate time mode and date-format as per the localized language. +* [RTL](https://ej2.syncfusion.com/react/documentation/schedule/localization?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) - Supports displaying the component to display in the direction from right to left. ## Resources -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/ai-coding-assistant/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) ## Support Product support is available through the following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) * Live chat @@ -135,9 +135,9 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/33.2.3/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm). To acquire a license for 150+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/scheduler-sdk?tag=es-seo-scheduler-sdk-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-scheduler-npm) for more info. diff --git a/components/spreadsheet/README.md b/components/spreadsheet/README.md index da664ac8..3c34789e 100644 --- a/components/spreadsheet/README.md +++ b/components/spreadsheet/README.md @@ -1,11 +1,11 @@ # React Spreadsheet Component -The [React Spreadsheet](https://www.syncfusion.com/react-ui-components/react-spreadsheet?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats. +The [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.

- Getting started . - Online demos . - Learn more + Getting started . + Online demos . + Learn more

@@ -23,7 +23,7 @@ Trusted by the world's leading companies ### Create a React Application -You can use [create-react-app](https://github.com/facebookincubator/create-react-app) to setup applications. To create React app, use the following command. +You can use [create-react-app](https://github.com/react/create-react-app) to setup applications. To create React app, use the following command. ```bash npx create-react-app my-app --template typescript @@ -87,70 +87,70 @@ export default function App() { Spreadsheet component is also offered in the following list of frameworks. -| [](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)
       [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)
       [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | +| [](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)
     [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)     | [](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)
       [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)       | [](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)
       [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)          | [](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)
  [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)   | [](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)
  [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples -* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/default) -* Fitness Tracker - [Source](https://github.com/SyncfusionExamples/showcase-react-health-tracker-dashboard-demo), [Live Demo](https://ej2.syncfusion.com/showcase/react/fitness-tracker-app/) +* Production Scheduler - [Source](https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-production-planning-and-scheduling-demo/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm), [Live Demo](https://document.syncfusion.com/showcase/react/spreadsheet-editor/production-scheduler/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/default) +* HR Payroll - [Source](https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-hr-timesheet-payroll/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm), [Live Demo](https://document.syncfusion.com/showcase/react/spreadsheet-editor/hr-payroll/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) ## Key features -* [Data sources](https://ej2.syncfusion.com/react/documentation/spreadsheet/data-binding/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#local-data): Bind the Spreadsheet component with an array of objects or data from a web service using [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding/). -* [Virtualization](https://ej2.syncfusion.com/react/documentation/spreadsheet/scrolling/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#virtual-scrolling): Provides the option to load large amount of data without performance degradation. -* [Selection](https://ej2.syncfusion.com/react/documentation/spreadsheet/selection/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to select a cell or range of cells. -* [Editing](https://ej2.syncfusion.com/react/documentation/spreadsheet/editing/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to dynamically edit a cell. -* [Formulas](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/formula): Provides built-in calculation library with pre-defined formulas and named range support. -* [Clipboard](https://ej2.syncfusion.com/react/documentation/spreadsheet/clipboard/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to perform clipboard operations. -* [Cell formatting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/cell-formatting): Provides the option to customize the appearance of cells. -* [Number formatting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/number-formatting): Provides the option to format the cell value. -* [Open](https://ej2.syncfusion.com/react/documentation/spreadsheet/open-save/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#open): Provides the option to open Excel and CSV files in Spreadsheet. -* [Save](https://ej2.syncfusion.com/react/documentation/spreadsheet/open-save/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#save): Provides the option to save Spreadsheet data as Excel, CSV, and PDF documents. -* [Sorting](https://ej2.syncfusion.com/react/documentation/spreadsheet/sort/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#sort-by-cell-value): Helps you to arrange the data to particular order in a selected range of cells. -* [Filtering](https://ej2.syncfusion.com/react/documentation/spreadsheet/filter/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#apply-filter-on-ui): Helps you to view specific rows in the Spreadsheet by hiding the other rows. -* [Undo Redo](https://ej2.syncfusion.com/react/documentation/spreadsheet/undo-redo/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to perform undo redo operations in Spreadsheet. -* [Collaborative editing](https://ej2.syncfusion.com/react/documentation/spreadsheet/use-cases/collaborative-editing/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option for real time changes across multiple users in the Spreadsheet. -* [Hyperlink](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/hyperlink): Provides the option to navigate to web link or cell reference within the sheet or to other sheet in Spreadsheet. -* [Resize](https://ej2.syncfusion.com/react/documentation/spreadsheet/mobile-responsiveness/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Allows you to change the row height and column width. Auto fit the rows and columns based on its content. -* [Wrap text](https://ej2.syncfusion.com/react/documentation/spreadsheet/cell-range/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#wrap-text): Provides the option to display the large content as multiple lines in a single cell. -* [Data validation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/data-validation): Provides the option to validate edited values based on data validation rules defined for a cell or range of cells. -* [Find and replace](https://ej2.syncfusion.com/react/documentation/spreadsheet/searching/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#find): Provides the option to find the data and replace it across all sheets in Spreadsheet. -* [Protect sheet](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/protect-sheet): Provides the option to restrict user actions like cell editing, row and column insertion, deletion, and resizing. -* [Borders](https://ej2.syncfusion.com/react/documentation/spreadsheet/formatting/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#borders): Provides the option to customize cell gridlines such as color and its style for enhanced UI. -* [Show/hide](https://ej2.syncfusion.com/react/documentation/spreadsheet/worksheet/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#sheet-visibility): Provides the option to show/hide rows, columns and sheets. -* [Insert/delete](https://ej2.syncfusion.com/react/documentation/spreadsheet/rows-and-columns/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#insert): Provides the option to insert/delete rows, columns and sheets. -* [Merge cells](https://ej2.syncfusion.com/react/documentation/spreadsheet/cell-range/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#merge-cells): Provides the option to combine two or more cells located in the same row or column into a single cell. -* [Conditional formatting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/conditional-formatting): Provides the option to format a cell or range of cells based on conditions applied. -* [Autofill](https://ej2.syncfusion.com/react/documentation/spreadsheet/cell-range/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#auto-fill): Provides the option to fill or copy a series or pattern of values and formats into adjacent cells in any direction. -* [Clear](https://ej2.syncfusion.com/react/documentation/spreadsheet/cell-range/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#clear): Provides the option to clear the content, formats, and hyperlinks applied to a cell or range of cells in a Spreadsheet. -* [Aggregates](https://ej2.syncfusion.com/react/documentation/spreadsheet/formulas/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to check the sum, average, count, and more for the selected cells or range in the sheet. -* [Picture](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/image): Allows you to view, insert, and modify a picture in a Spreadsheet with customizing options. -* [Chart](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/chart): Transforms your Spreadsheet data to an intuitive overview for better understanding and to make smart business decisions. -* [Freeze panes](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/freeze-pane): Allows you to keep the specified rows and columns always visible at the top and left side of the sheet while scrolling through the sheet. -* [Password protection](https://ej2.syncfusion.com/react/documentation/spreadsheet/protect-sheet/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#protect-workbook): Allows you to protect the workbook with a password. -* [Multi-line editing](https://ej2.syncfusion.com/react/documentation/spreadsheet/editing/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Allows you to insert a line break between paragraphs of the text within a cell in a Spreadsheet. -* [Calculate range selection](https://ej2.syncfusion.com/react/documentation/spreadsheet/selection/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Helps you to select a range or multiple ranges when editing a formula in a cell. -* [Right-to-left (RTL)](https://ej2.syncfusion.com/react/documentation/right-to-left/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Aligns content in the Spreadsheet component from right to left. -* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/cell-template): Templates can be used to create custom user experiences in the Spreadsheet. -* [Globalization](https://ej2.syncfusion.com/react/documentation/spreadsheet/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#localization): Personalize the Spreadsheet component with different languages, as well as culture-specific number, date, and time formatting. -* [Accessibility](https://ej2.syncfusion.com/react/documentation/spreadsheet/accessibility/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides with built-in accessibility support which helps to access all the Spreadsheet component features through the keyboard, screen readers, or other assistive technology devices. +* [Data sources](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/data-binding?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Bind the Spreadsheet component with an array of objects or data from a web service using [DataManager](https://ej2.syncfusion.com/react/documentation/data/data-binding?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm). +* [Virtualization](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/scrolling-and-virtualization?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to load large amount of data without performance degradation. +* [Selection](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/selection?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to select a cell or range of cells. +* [Editing](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-ranges-and-operations/editing?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to dynamically edit a cell. +* [Formulas](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas-and-calculations/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/formula): Provides built-in calculation library with pre-defined formulas and named range support. +* [Clipboard](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-ranges-and-operations/clipboard?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to perform clipboard operations. +* [Cell formatting](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formatting/text-cell-formatting/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/cell-formatting): Provides the option to customize the appearance of cells. +* [Number formatting](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formatting/number-formatting/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/number-formatting): Provides the option to format the cell value. +* [Open](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/open-excel-files?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to open Excel and CSV files in Spreadsheet. +* [Save](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/open-excel-files?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to save Spreadsheet data as Excel, CSV, and PDF documents. +* [Sorting](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/sort?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Helps you to arrange the data to particular order in a selected range of cells. +* [Filtering](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/filter?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Helps you to view specific rows in the Spreadsheet by hiding the other rows. +* [Undo Redo](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/undo-redo?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to perform undo redo operations in Spreadsheet. +* [Collaborative editing](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/use-cases/collaborative-editing?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option for real time changes across multiple users in the Spreadsheet. +* [Hyperlink](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/link/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/hyperlink): Provides the option to navigate to web link or cell reference within the sheet or to other sheet in Spreadsheet. +* [Resize](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/mobile-responsiveness?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Allows you to change the row height and column width. Auto fit the rows and columns based on its content. +* [Wrap text](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-range-and-operation?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to display the large content as multiple lines in a single cell. +* [Data validation](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/data-validation/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/data-validation): Provides the option to validate edited values based on data validation rules defined for a cell or range of cells. +* [Find and replace](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/searching?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to find the data and replace it across all sheets in Spreadsheet. +* [Protect sheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/protect-sheet): Provides the option to restrict user actions like cell editing, row and column insertion, deletion, and resizing. +* [Borders](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formatting/conditional-formatting?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to customize cell gridlines such as color and its style for enhanced UI. +* [Show/hide](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/worksheet?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to show/hide rows, columns and sheets. +* [Insert/delete](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/rows-and-columns/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to insert/delete rows, columns and sheets. +* [Merge cells](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-range-and-operation?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to combine two or more cells located in the same row or column into a single cell. +* [Conditional formatting](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formatting/conditional-formatting/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/conditional-formatting): Provides the option to format a cell or range of cells based on conditions applied. +* [Autofill](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-range-and-operation?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to fill or copy a series or pattern of values and formats into adjacent cells in any direction. +* [Clear](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-range-and-operation?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to clear the content, formats, and hyperlinks applied to a cell or range of cells in a Spreadsheet. +* [Aggregates](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/formulas-and-calculations?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides the option to check the sum, average, count, and more for the selected cells or range in the sheet. +* [Image](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/images-and-illustrations/overview/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/image): Allows you to view, insert, and modify a picture in a Spreadsheet with customizing options. +* [Chart](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/charts-and-visualizations/overview/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/chart): Transforms your Spreadsheet data to an intuitive overview for better understanding and to make smart business decisions. +* [Freeze panes](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/rows-and-columns/freeze-pane/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/freeze-pane): Allows you to keep the specified rows and columns always visible at the top and left side of the sheet while scrolling through the sheet. +* [Password protection](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Allows you to protect the workbook with a password. +* [Multi-line editing](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/cell-ranges-and-operations/editing?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Allows you to insert a line break between paragraphs of the text within a cell in a Spreadsheet. +* [Calculate range selection](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/selection?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Helps you to select a range or multiple ranges when editing a formula in a cell. +* [Right-to-left (RTL)](https://ej2.syncfusion.com/react/documentation/right-to-left?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Aligns content in the Spreadsheet component from right to left. +* [Templates](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/user-interface-customization/custom-cell-templates/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm#/material/spreadsheet/cell-template): Templates can be used to create custom user experiences in the Spreadsheet. +* [Globalization](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/global-local?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Personalize the Spreadsheet component with different languages, as well as culture-specific number, date, and time formatting. +* [Accessibility](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/accessibility?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm): Provides with built-in accessibility support which helps to access all the Spreadsheet component features through the keyboard, screen readers, or other assistive technology devices. ## Resources -* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview) -* [Theme Studio](https://ej2.syncfusion.com/themestudio/) -* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github) -* [Road Map](https://www.syncfusion.com/products/roadmap/react) -* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all) +* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/mcp-server/overview?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) +* [Theme Studio](https://ej2.syncfusion.com/themestudio/?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) +* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) +* [Road Map](https://www.syncfusion.com/products/roadmap/react?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) +* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) ## Support Product support is available through the following mediums. -* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support +* [Support ticket](https://support.syncfusion.com/support/tickets/create?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) -* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) +* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) * Live chat @@ -160,10 +160,10 @@ Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components ## License and copyright -> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). +> This is a commercial product and requires a paid license for possession or use. Syncfusion® licensed software, including this component, is subject to the terms and conditions of Syncfusion® [EULA](https://www.syncfusion.com/license/studio/34.1.29/syncfusion_essential_studio_eula.pdf?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm). To acquire a license for 140+ [React UI components](https://www.syncfusion.com/react-components?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm), you can [purchase](https://www.syncfusion.com/sales/pricing?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) or [start a free 30-day trial](https://www.syncfusion.com/downloads/spreadsheet-editor-sdk?tag=es-seo-spreadsheet-editor-sdk-download-trial). -> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. +> A free community [license](https://www.syncfusion.com/products/communitylicense?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-spreadsheet-npm) for more info. -© Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. \ No newline at end of file +© Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.