diff --git a/README.md b/README.md index a205e247..a735f9a1 100644 --- a/README.md +++ b/README.md @@ -1,1212 +1,89 @@ -# Syncfusion React UI Components Library (Essential JS 2) - Syncfusion React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 70+ UI components that every applications will ever need. - > 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, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials). -> -> 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. - ## Resources - * [Getting Started](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start?utm_source=npm&utm_campaign=ej2-react-ui-components) -* [View Online Demos](https://ej2.syncfusion.com/react/demos?utm_source=npm&utm_campaign=ej2-react-ui-components) -* [Product Page](https://www.syncfusion.com/react-ui-components?utm_source=npm&utm_campaign=ej2-react-ui-components) - ## Framework highlights - ### Lightweight and user friendly - The entire Library framework is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires. - ### Modular architecture - All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application. - ### Built for performance - Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible. - ### Responsive and touch friendly - All the components are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops. - ### Stunning built-in themes - Pixel-perfect built-in themes are available in material, bootstrap and fabric design. In addition, it comes with Accessible high-contrast theme and an online tool "[Theme Studio](https://ej2.syncfusion.com/themestudio/)" to customize the provided built-in themes. - ### Globalization simplified - Easily build applications to be used by a global audience in various language and culture settings. - ### Stay current - With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed. - - ## Control List - -### Grids - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Data Grid - - npm package @syncfusion/ej2-react-grids      code coverage of @syncfusion/ej2-react-grids - - Source - - Live demo - - Documentation -
- Pivot Table - - npm package @syncfusion/ej2-react-pivotview      code coverage of @syncfusion/ej2-react-pivotview - - Source - - Live demo - - Documentation -
- Spreadsheet - - npm package @syncfusion/ej2-react-spreadsheet      code coverage of @syncfusion/ej2-react-spreadsheet - - Source - - Live demo - - Documentation -
- Tree Grid - - npm package @syncfusion/ej2-react-treegrid      code coverage of @syncfusion/ej2-react-treegrid - - Source - - Live demo - - Documentation -
- -### Editors - - - - - - - - - - - - - - - - - - - - - - - -
- In-place Editor - - npm package @syncfusion/ej2-react-inplace-editor      code coverage of @syncfusion/ej2-react-inplace-editor - - Source - - Live demo - - Documentation -
- Rich Text Editor - - npm package @syncfusion/ej2-react-richtexteditor      code coverage of @syncfusion/ej2-react-richtexteditor - - Source - - Live demo - - Documentation -
- Word Processor - - npm package @syncfusion/ej2-react-documenteditor      code coverage of @syncfusion/ej2-react-documenteditor - - Source - - Live demo - - Documentation -
- -### Dropdowns - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- AutoComplete - - npm package @syncfusion/ej2-react-dropdowns      code coverage of @syncfusion/ej2-react-dropdowns - - Source - - Live demo - - Documentation -
- ComboBox - - Source - - Live demo - - Documentation -
- Dropdown List - - Source - - Live demo - - Documentation -
- Dropdown Tree - - Source - - Live demo - - Documentation -
- List Box - - Source - - Live demo - - Documentation -
- MultiSelect Dropdown - - Source - - Live demo - - Documentation -
- -### Inputs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Checkbox - - npm package @syncfusion/ej2-react-buttons      code coverage of @syncfusion/ej2-react-buttons - - Source - - Live demo - - Documentation -
- Radio Button - - Source - - Live demo - - Documentation -
- Toggle Switch Button - - Source - - Live demo - - Documentation -
- Color Picker - - npm package @syncfusion/ej2-react-inputs      code coverage of @syncfusion/ej2-react-inputs - - Source - - Live demo - - Documentation -
- File Upload - - Source - - Live demo - - Documentation -
- Input Mask - - Source - - Live demo - - Documentation -
- Numeric Textbox - - Source - - Live demo - - Documentation -
- Range Slider - - Source - - Live demo - - Documentation -
- TextBox - - Source - - Live demo - - Documentation -
- Signature - - Source - - Live demo - - Documentation -
- -### Data Visualization - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Barcode Generator - - npm package @syncfusion/ej2-react-barcode-generator      code coverage of @syncfusion/ej2-react-barcode-generator - - Source - - Live demo - - Documentation -
- Circular Gauge - - npm package @syncfusion/ej2-react-circulargauge      code coverage of @syncfusion/ej2-react-circulargauge - - Source - - Live demo - - Documentation -
- Diagram - - npm package @syncfusion/ej2-react-diagrams      code coverage of @syncfusion/ej2-react-diagrams - - Source - - Live demo - - Documentation -
- HeatMap Chart - - npm package @syncfusion/ej2-react-heatmap      code coverage of @syncfusion/ej2-react-heatmap - - Source - - Live demo - - Documentation -
- Kanban - - npm package @syncfusion/ej2-react-kanban      code coverage of @syncfusion/ej2-react-kanban - - Source - - Live demo - - Documentation -
- Linear Gauge - - npm package @syncfusion/ej2-react-lineargauge      code coverage of @syncfusion/ej2-react-lineargauge - - Source - - Live demo - - Documentation -
- Maps - - npm package @syncfusion/ej2-react-maps      code coverage of @syncfusion/ej2-react-maps - - Source - - Live demo - - Documentation -
- TreeMap - - npm package @syncfusion/ej2-react-treemap      code coverage of @syncfusion/ej2-react-treemap - - Source - - Live demo - - Documentation -
- Bullet Chart - - npm package @syncfusion/ej2-react-charts      code coverage of @syncfusion/ej2-react-charts - - Source - - Live demo - - Documentation -
- Charts - - Source - - Live demo - - Documentation -
- Range Selector - - Source - - Live demo - - Documentation -
- Smith Chart - - Source - - Live demo - - Documentation -
- Sparkline Charts - - Source - - Live demo - - Documentation -
- Stock Chart - - Source - - Live demo - - Documentation -
- -### Calendars - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Calendar - - npm package @syncfusion/ej2-react-calendars      code coverage of @syncfusion/ej2-react-calendars - - Source - - Live demo - - Documentation -
- DatePicker - - Source - - Live demo - - Documentation -
- DateRangePicker - - Source - - Live demo - - Documentation -
- DateTime Picker - - Source - - Live demo - - Documentation -
- TimePicker - - Source - - Live demo - - Documentation -
- Gantt Chart - - npm package @syncfusion/ej2-react-gantt      code coverage of @syncfusion/ej2-react-gantt - - Source - - Live demo - - Documentation -
- Scheduler - - npm package @syncfusion/ej2-react-schedule      code coverage of @syncfusion/ej2-react-schedule - - Source - - Live demo - - Documentation -
- -### Navigation - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Accordion - - npm package @syncfusion/ej2-react-navigations      code coverage of @syncfusion/ej2-react-navigations - - Source - - Live demo - - Documentation -
- Breadcrumb - - Source - - Live demo - - Documentation -
- Carousel - - Source - - Live demo - - Documentation -
- Context Menu - - Source - - Live demo - - Documentation -
- Menu Bar - - Source - - Live demo - - Documentation -
- Sidebar - - Source - - Live demo - - Documentation -
- Tabs - - Source - - Live demo - - Documentation -
- Toolbar - - Source - - Live demo - - Documentation -
- TreeView - - Source - - Live demo - - Documentation -
- File Manager - - npm package @syncfusion/ej2-react-filemanager      code coverage of @syncfusion/ej2-react-filemanager - - Source - - Live demo - - Documentation -
- -### Buttons - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Button - - npm package @syncfusion/ej2-react-buttons      code coverage of @syncfusion/ej2-react-buttons - - Source - - Live demo - - Documentation -
- Chips - - Source - - Live demo - - Documentation -
- Button Group - - npm package @syncfusion/ej2-react-splitbuttons      code coverage of @syncfusion/ej2-react-splitbuttons - - Source - - Live demo - - Documentation -
- Dropdown Menu - - Source - - Live demo - - Documentation -
- Progress Button - - Source - - Live demo - - Documentation -
- Split Button - - Source - - Live demo - - Documentation -
- -### Layout - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Avatar - - npm package @syncfusion/ej2-react-layouts      code coverage of @syncfusion/ej2-react-layouts - - Styles - - Live demo - - Documentation -
- Card - - Styles - - Live demo - - Documentation -
- Dashboard Layout - - Source - - Live demo - - Documentation -
- Splitter - - Source - - Live demo - - Documentation -
- Dialog - - npm package @syncfusion/ej2-react-popups      code coverage of @syncfusion/ej2-react-popups - - Source - - Live demo - - Documentation -
- Tooltip - - Source - - Live demo - - Documentation -
- ListView - - npm package @syncfusion/ej2-react-lists      code coverage of @syncfusion/ej2-react-lists - - Source - - Live demo - - Documentation -
- -### Notification - - - - - - - - - - - - - - - - - - - - - - -
- Badge - - npm package @syncfusion/ej2-react-notifications      code coverage of @syncfusion/ej2-react-notifications - - Styles - - Live demo - - Documentation -
- Toast - - Source - - Live demo - - Documentation -
- Progress Bar - - npm package @syncfusion/ej2-react-progressbar      code coverage of @syncfusion/ej2-react-progressbar - - Source - - Live demo - - Documentation -
- -### Forms - - - - - - - - - -
- Query Builder UI - - npm package @syncfusion/ej2-react-querybuilder      code coverage of @syncfusion/ej2-react-querybuilder - - Source - - Live demo - - Documentation -
- -### Viewer - - - - - - - - - -
- PDF Viewer - - npm package @syncfusion/ej2-react-pdfviewer      code coverage of @syncfusion/ej2-react-pdfviewer - - Source - - Live demo - - Documentation -
- - ## Supported Frameworks +# Syncfusion React UI Components Library – Essential JS 2 + +Syncfusion Essential JS 2 (EJ2) for React is a complete enterprise-grade UI component library with **145+** high-performance, responsive, lightweight, modular, and touch-friendly React components. Build modern, cross-platform web applications faster with rich features like accessibility (WCAG 2.2 compliant), built-in themes (Material 3, Bootstrap 5.3, Tailwind 3, Fluent 2, etc.), globalization, right-to-left (RTL) support, and seamless integration. + +> **Note:** This is a commercial library. A **free community license** is available for companies/teams with < $1M USD annual gross revenue, ≤5 developers, and ≤10 total employees. +> See: [Community License](https://www.syncfusion.com/products/communitylicense) + +[![npm version](https://badge.fury.io/js/%40syncfusion%2Fej2-react-grids.svg)](https://www.npmjs.com/package/@syncfusion/ej2-react-grids) +For latest updates: Check [Releases](https://github.com/syncfusion/ej2-react-ui-components/releases) or [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2) + +* [Product Overview](https://www.syncfusion.com/react-ui-components) +* [Documentation](https://ej2.syncfusion.com/react/documentation) +* [Live Demos](https://ej2.syncfusion.com/react/demos) +* [API Reference](https://ej2.syncfusion.com/react/documentation/api/) + +## Features + +- **145+ Components** — Including established React components +- **Lightweight & Modular** – Tree-shakable; include only what you need. +- **Top-tier Performance** – Virtualization, lazy loading, and optimized rendering. +- **Modern Theming** – Material 3, Bootstrap 5.3, Tailwind 3 CSS, Fabric, Fluent 2, and High-Contrast themes. +- **Full Accessibility** – WCAG 2.2, Section 508, ARIA compliant. +- **AI-Ready Components** – AI AssistView, Chat UI, Smart Paste, Speech-to-Text, OTP Input, Block Editor. +- **React 19 Ready** – Complete support including latest React Server Components patterns. +- **Frequent Releases** – 4 major upgrades per year + weekly patches. + +## Components List + +Components are grouped by category. Install individually via NPM (e.g., `npm install @syncfusion/ej2-react-grids`) for a modular bundle. + +| Category | Key Components | Highlights / Features | +|---|---|---| +| **Smart / AI Components** | AI AssistView, Smart TextArea, Smart Paste Button | AI-assisted text, intelligent pasting, chat-like interfaces | +| **Grids** | Data Grid, Pivot Table, Tree Grid | Virtual scrolling, Editing/filtering/sorting, Excel/PDF/CSV export | +| **Data Visualization** | Charts, 3D Charts, Stock Chart, Circular Gauge, Linear Gauge, Maps, Diagram, HeatMap, TreeMap, Bullet Chart, Kanban, Sparkline, Barcode, Smith Chart, Range Selector | 80+ chart types, real-time updates, interactive diagrams, geospatial rendering | +| **Calendars & Scheduling** | Scheduler, Gantt Chart, Calendar, DatePicker, DateRangePicker, DateTimePicker, TimePicker | Drag-and-drop events, resources, recurring appointments, timeline views | +| **Dropdowns** | AutoComplete, ComboBox, MultiSelect Dropdown, Dropdown List, ListBox, DropDown Tree, MultiColumn ComboBox, Mention | Filtering, grouping, virtualization, remote data, templates | +| **Inputs & Editors** | TextBox, TextArea, Numeric TextBox, Masked TextBox, CheckBox, RadioButton, Color Picker, File Upload, Range Slider, Switch, Signature, Rating, OTP Input | Validation, floating labels, file drag-drop, accessibility | +| **Buttons & Chips** | Button, ButtonGroup, SplitButton, Dropdown Menu, Progress Button, Chips, FAB, Speed Dial | Icons, animations, loading states, predefined styles | +| **Navigation & Layout** | Accordion, Tabs, TreeView, Toolbar, Sidebar, Menu Bar, Context Menu, Carousel, AppBar, Breadcrumb, Ribbon, Stepper, Pager, File Manager, Dialog, Card, Splitter, ListView, Tooltip, Dashboard Layout | Collapsible, draggable, multi-level, responsive layouts | +| **Forms & Query** | Query Builder, Form Validator | Visual rule/filter building, complex queries, validation | +| **Editors** | Rich Text Editor, In-place Editor, Image Editor, Block Editor | Markdown/HTML editing, annotations, AI Assistant integration | +| **Notifications** | Toast, Progress Bar, Spinner, Badge, Skeleton, Message | Custom positions, animations, non-blocking alerts | + +For detailed documentation for all the components, see: [Documentation Introduction](https://ej2.syncfusion.com/react/documentation/introduction). + +## Quick Links + +- **Installation** — `npm install @syncfusion/ej2-react-grids --save` (per-component) +- **Getting Started** — https://ej2.syncfusion.com/react/documentation/getting-started/quick-start +- **Live Demos** — https://ej2.syncfusion.com/react/demos/ +- **Themes & Customization** — [Theme Studio](https://ej2.syncfusion.com/themestudio/) +- **NPM Packages** — https://www.npmjs.com/search?q=%40syncfusion%2Fej2-react +- **Community License** — https://www.syncfusion.com/products/communitylicense +- **Support** — [Tickets](https://support.syncfusion.com/create) • [Forums](https://www.syncfusion.com/forums/react-js2) + +## Showcase Applications + +Real-world demos built with Syncfusion React components: + +- **Loan Calculator** — Interactive sliders and visualizations + [Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/) +- **Diagram Builder** — Drag-and-drop diagramming + [Demo](https://ej2.syncfusion.com/showcase/react/diagrambuilder/) +- **Logic Circuit Designer** — Interactive simulation + [Demo](https://ej2.syncfusion.com/showcase/react/logic-circuit/) +- **Hotel Booking** — Reservation system + [Demo](https://ej2.syncfusion.com/showcase/react/hotelbooking/) +- **BPMN Editor** — Process modeling + [Demo](https://ej2.syncfusion.com/showcase/react/bpmn-editor/) +- **Mind Map Maker** — Brainstorming tool + [Demo](https://ej2.syncfusion.com/showcase/react/mind-map/) + +Explore more at: https://www.syncfusion.com/showcase-apps/react + +--- +## Supported Frameworks The Essential JS 2 is also offered in following list of frameworks. * [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=npm&utm_campaign=ej2-react-ui-components) -* [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=npm&utm_campaign=ej2-react-ui-components) -* [Vue.js](https://www.syncfusion.com/vue-ui-components?utm_source=npm&utm_campaign=ej2-react-ui-components) +* [Angular](https://www.syncfusion.com/angular-components?utm_source=npm&utm_campaign=ej2-react-ui-components) +* [Vue](https://www.syncfusion.com/vue-components?utm_source=npm&utm_campaign=ej2-react-ui-components) * [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=npm&utm_campaign=ej2-react-ui-components) * [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=npm&utm_campaign=ej2-react-ui-components) - ## Support - Product support is available for through following mediums. - * Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=ej2-react-ui-components) support system or [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_campaign=ej2-react-ui-components). -* New [GitHub issue](https://github.com/syncfusion/ej2-react-ui-components/issues/new). -* Ask your query in [Stack Overflow](https://stackoverflow.com/) with tag `syncfusion` and `ej2`. - ## License - Check the license detail [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license). - ## Changelog - Check the changelog [here](https://ej2.syncfusion.com/react/documentation/release-notes/index/?utm_source=npm&utm_campaign=ej2-react-ui-components) - © Copyright 2022 Syncfusion, Inc. All Rights Reserved. - The Syncfusion Essential Studio license and copyright applies to this distribution. + +## Changelog +Check the changelog [here](https://ej2.syncfusion.com/react/documentation/release-notes/index/?utm_source=npm&utm_campaign=ej2-react-ui-components). + +© Copyright 2026 Syncfusion, Inc. All Rights Reserved. +The Syncfusion Essential Studio license and copyright applies to this distribution.