From 81f258d405552806432503b832784a303356fbf6 Mon Sep 17 00:00:00 2001 From: Mohamed Imran Date: Mon, 6 Oct 2025 12:25:48 +0530 Subject: [PATCH 1/2] Update readme.md --- components/base/README.md | 11 +- components/buttons/README.md | 162 ++++++++++++------ components/buttons/package.json | 2 +- components/calendars/README.md | 90 +++++----- components/calendars/package.json | 2 +- components/charts/README.md | 41 +++-- components/charts/package.json | 2 +- components/data/README.md | 15 +- components/data/package.json | 2 +- components/dropdowns/README.md | 22 ++- components/dropdowns/package.json | 2 +- components/grid/README.md | 75 +++++--- components/grid/package.json | 2 +- components/icons/README.md | 33 +++- components/icons/package.json | 2 +- components/inputs/README.md | 126 +++++++++++--- components/inputs/package.json | 2 +- components/lists/README.md | 22 ++- components/lists/package.json | 2 +- components/navigations/README.md | 81 +++++++-- components/navigations/package.json | 2 +- components/notifications/README.md | 86 +++++++--- components/notifications/package.json | 2 +- components/pager/README.md | 50 +++--- components/pager/package.json | 2 +- components/popups/README.md | 80 +++++++-- components/popups/package.json | 2 +- components/splitbuttons/README.md | 66 +++++-- components/splitbuttons/package.json | 2 +- components/svg-tooltip-component/README.md | 27 +-- components/svg-tooltip-component/package.json | 2 +- 31 files changed, 694 insertions(+), 323 deletions(-) diff --git a/components/base/README.md b/components/base/README.md index 5680bd7..af38f3e 100644 --- a/components/base/README.md +++ b/components/base/README.md @@ -10,7 +10,7 @@ The `@syncfusion/react-base` package is a foundational library for Syncfusion's - `Localization`: Adaptable content for region-specific requirements. - `Right-to-Left (RTL)`: Built-in support for RTL languages like Arabic and Hebrew. -## Installation +**Setup** To install `@syncfusion/react-base` and its dependencies, run the following command: @@ -18,7 +18,7 @@ To install `@syncfusion/react-base` and its dependencies, run the following comm npm install @syncfusion/react-base ``` -## Usage +**Usage** This package serves as a dependency for other Syncfusion® React components. Import the necessary utilities or providers as needed in your React application. For example: @@ -31,7 +31,10 @@ import { Button } from '@syncfusion/react-buttons'; ``` -Refer to the [Syncfusion® Documentation](https://react.syncfusion.com/overview/introduction) for detailed usage instructions and examples. +**Resources** + +- [Base Demo/Docs](https://react.syncfusion.com/common-features/right-to-left) +- [Base API](https://react-api.syncfusion.com/base/overview) ## Support @@ -51,4 +54,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution. diff --git a/components/buttons/README.md b/components/buttons/README.md index 4ad2545..474b256 100644 --- a/components/buttons/README.md +++ b/components/buttons/README.md @@ -1,14 +1,18 @@ -# React Buttons Components +# Syncfusion React Button Components -## What's Included in the React Button Package +The Syncfusion React Buttons package provides a feature-rich collection of UI components, including Button, CheckBox, RadioButton, Switch, Chip, ChipList, and Floating Action Button, for building modern, interactive React applications. -The React Button package includes the following list of components. +## Setup -### React Button +To install `buttons` and its dependent packages, use the following command, -The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability. +```sh +npm install @syncfusion/react-buttons +``` -Explore the demo [here](https://react.syncfusion.com/button). +## React Button + +The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability. **Key features** @@ -24,11 +28,26 @@ Explore the demo [here](https://react.syncfusion.com/button). - **Selection Management:** Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons. -### React Checkbox +**Usage** -The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications. +```tsx +import { Button } from '@syncfusion/react-buttons'; + +export default function App() { + return ( + + ); +}; +``` + +**Resources** -Explore the demo [here](https://react.syncfusion.com/checkbox). +- [Button Demo/Docs](https://react.syncfusion.com/button) +- [Button API](https://react-api.syncfusion.com/button/overview) + +## React Checkbox + +The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications. **Key features** @@ -38,11 +57,26 @@ Explore the demo [here](https://react.syncfusion.com/checkbox). - **Label Positioning:** Configure the label placement with the `labelPlacement` prop, choosing whether the label appears before or after the Checkbox. -### React Chip +**Usage** -The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element. +```tsx +import { Checkbox } from '@syncfusion/react-buttons'; + +export default function App() { + return ( + + ); +} +``` + +**Resources** -Explore the demo [here](https://react.syncfusion.com/chip). +- [Checkbox Demo/Docs](https://react.syncfusion.com/checkbox) +- [Checkbox API](https://react-api.syncfusion.com/checkbox/overview) + +## React Chip + +The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element. **Key features** @@ -52,11 +86,26 @@ Explore the demo [here](https://react.syncfusion.com/chip). - **Icons and Avatars:** Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context. -### React ChipList +**Usage** -The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements. +```tsx +import { Chip } from '@syncfusion/react-buttons'; + +export default function App() { + return ( + Anne + ); +} +``` + +**Resources** -Explore the demo [here](https://react.syncfusion.com/chiplist). +- [Chip Demo/Docs](https://react.syncfusion.com/chip) +- [Chip API](https://react-api.syncfusion.com/chip/overview) + +## React ChipList + +The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements. **Key features** @@ -70,11 +119,26 @@ Explore the demo [here](https://react.syncfusion.com/chiplist). - **Controlled & Uncontrolled Modes:** Supports both controlled and uncontrolled component patterns for selection and deletion. -### React Floating Action Button +**Usage** -The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options. +```tsx +import { ChipList } from "@syncfusion/react-buttons"; + +export default function App() { + return ( + + ); +} +``` + +**Resources** -Explore the demo [here](https://react.syncfusion.com/floating-action-button). +- [ChipList Demo/Docs](https://react.syncfusion.com/chipList) +- [ChipList API](https://react-api.syncfusion.com/chipList/overview) + +## React Floating Action Button + +The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options. **Key features** @@ -90,53 +154,53 @@ Explore the demo [here](https://react.syncfusion.com/floating-action-button). - **Toggle Functionality:** Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios. -### React RadioButton +**Usage** -The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users. - -Explore the demo [here](https://react.syncfusion.com/radio-button). - -**Key features** - -- **Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group. - -- **Label Customization:** The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection. +```tsx +import { Fab, Color, FabPosition } from "@syncfusion/react-buttons"; -- **Label Positioning:** Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency. +export default function App() { + return ( + FAB + ); +} +``` -- **Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing. +**Resources** -### React Switch +- [Floating Action Button Demo/Docs](https://react.syncfusion.com/floating-action-button) +- [Floating Action Button API](https://react-api.syncfusion.com/floating-action-button/overview) -The Switch component is a toggle interface offering a binary decision between on and off states, visually represented with an optional label for clarity. Its intuitive design makes it ideal for user interactions requiring a straightforward choice. +## React RadioButton -Explore the demo [here](https://react.syncfusion.com/switch). +The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users. **Key features** -- **State Control:** Easily configure the switch to be in a checked (on) or unchecked (off) state, providing an immediate visual cue of its current position to users. +- **Selection State:** Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group. -- **Label Customization:** Customize the on and off labels to provide additional context for users, clarifying what each state signifies within the application's workflow. +- **Label Customization:** The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection. -- **Size Options:** Adapt the size of the switch to fit various UI designs with available size options such as 'small', 'medium' and 'bigger', ensuring seamless integration with different interfaces. +- **Label Positioning:** Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency. -- **Form Integration:** Utilize the switch within forms by setting name and value attributes, ensuring that user selections are included in form submissions for backend processing. +- **Form Integration:** The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing. +**Usage** -

-Trusted by the world's leading companies - - Syncfusion logo - -

+```tsx +import { RadioButton } from "@syncfusion/react-buttons"; -## Setup +export default function App() { + return ( + + ); +} +``` -To install `buttons` and its dependent packages, use the following command, +**Resources** -```sh -npm install @syncfusion/react-buttons -``` +- [RadioButton Demo/Docs](https://react.syncfusion.com/radio-button) +- [RadioButton API](https://react-api.syncfusion.com/radio-button/overview) ## Support @@ -156,4 +220,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/buttons/package.json b/components/buttons/package.json index 5cc3d91..b8aea03 100644 --- a/components/buttons/package.json +++ b/components/buttons/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-buttons", "version": "31.1.17", - "description": "A package of feature-rich React components such as Button, CheckBox and RadioButton.", + "description": "Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/calendars/README.md b/components/calendars/README.md index e8828e6..225d276 100644 --- a/components/calendars/README.md +++ b/components/calendars/README.md @@ -1,74 +1,70 @@ -# React Calendars Components - -## What's Included in the React Calendar Package - -The React Calendar package includes the following list of components. - -### React Calendar - +# Syncfusion React Calendar Components + +The Syncfusion React Calendar components for managing date and time with features like date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization. + +## React Calendar + The Calendar component provides a versatile and interactive date selection interface with support for multiple views, customizations, and selection modes. It is designed to handle a wide range of scheduling and planning use cases. - -Explore the demo [here](https://react.syncfusion.com/calendar). - + **Key features** - + - **View Modes:** Switch between month, year, and decade views using the start and depth properties to control the initial view and navigation depth. - + - **Date Range Control:** Restrict selectable dates using minDate and maxDate to ensure users can only choose valid dates within a defined range. - + - **Custom Cell Templates:** Use the cellTemplate property to customize the appearance of specific dates, including disabling dates to prevent selection. - + - **Week Number Display:** Enable the weekNumber property to show week numbers alongside calendar dates for better context in scheduling. - + - **Multi-Date Selection:** Activate the multiSelect property to allow users to select multiple non-consecutive dates, ideal for marking events or selecting custom date ranges. - -### React DatePicker - + +## React DatePicker + The DatePicker component offers a streamlined and customizable interface for selecting dates, supporting various formats, view modes, and styling options. It is ideal for forms, scheduling tools, and any application requiring precise date input. - -Explore the demo [here](https://react.syncfusion.com/date-picker). - + **Key features** - + - **Custom Date Formats:** Display and receive date values in formats that suit your application using the format property, which supports standard date format patterns. - + - **Read-Only Mode:** Prevent user edits while displaying a selected date by enabling the readOnly property—useful for forms or scenarios where the date is system-generated. - + - **View Modes:** Navigate through Month, Year, and Decade views to provide flexible date selection experiences. - + - **Custom Cell Templates:** Highlight important dates, events, or special occasions using the cellTemplate property to apply custom styling, icons, or indicators. - -

-Trusted by the world's leading companies - - Syncfusion logo - -

- + ## Setup - + To install `Calendars` and its dependent packages, use the following command, - + ```sh npm install @syncfusion/react-calendars ``` - + +

+Trusted by the world's leading companies + + + +

+ ## 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 * Live chat - + ## Changelog + Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/calendars/CHANGELOG.md). 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 [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). - + > 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/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. - -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. + +See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campai…) 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/calendars/package.json b/components/calendars/package.json index e6c0a9d..fa0b593 100644 --- a/components/calendars/package.json +++ b/components/calendars/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-calendars", "version": "31.1.17", - "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.", + "description": "Syncfusion React Calendar for date/time with formatting, editing, multi-select, range limits, month/year views, strict mode, and globalization.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/charts/README.md b/components/charts/README.md index 0eb808e..7a28c95 100644 --- a/components/charts/README.md +++ b/components/charts/README.md @@ -2,8 +2,6 @@ The Chart component is designed to deliver high-performance, interactive data visualizations with a wide range of chart types and customization options. -Explore the demo [here](https://react.syncfusion.com/chart/overview). - **Key features** - **High Performance:** Optimized to render large datasets with minimal lag, ensuring smooth interactions and fast updates. @@ -20,6 +18,35 @@ Explore the demo [here](https://react.syncfusion.com/chart/overview). - **Customization Options:** Allows developers to tailor data points, series styles, and UI behaviors to meet specific application needs. +**Setup** + +To install `@syncfusion/react-charts` and its dependent packages, use the following command: + +```sh +npm install @syncfusion/react-charts +``` + +**Usage** + +```tsx +import { Chart, ChartPrimaryXAxis, ChartSeries, ChartSeriesCollection } from '@syncfusion/react-charts'; + +export default function App() { + return ( + + + + + + + ); +}; +``` + +**Resources** + +- [Chart Demo/Docs](https://react.syncfusion.com/chart/overview) +- [Chart API](https://react-api.syncfusion.com/chart/overview)

Trusted by the world's leading companies @@ -28,14 +55,6 @@ Trusted by the world's leading companies

-## Setup - -To install `@syncfusion/react-charts` and its dependent packages, use the following command: - -```sh -npm install @syncfusion/react-charts -``` - ## Support Product support is available through following mediums. @@ -54,4 +73,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/charts/package.json b/components/charts/package.json index 6e77aaa..812b26d 100644 --- a/components/charts/package.json +++ b/components/charts/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-charts", "version": "31.1.17", - "description": "A feature-rich React chart component for visualizing data effectively.", + "description": "Syncfusion React Charts for feature-rich data visualization", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/data/README.md b/components/data/README.md index 2dead91..dd64749 100644 --- a/components/data/README.md +++ b/components/data/README.md @@ -2,12 +2,6 @@ `@syncfusion/react-data` is a data management package to perform data operations such as grouping, sorting in client applications. It will act as an abstraction for using local data sources like array of JavaScript objects and remote data sources like web services returning JSON, JSONP, oData or XML. -

-Trusted by the world's leading companies - - Syncfusion logo - -

## Setup @@ -17,6 +11,13 @@ To install `@syncfusion/react-data` and its dependent packages, use the followin npm install @syncfusion/react-data ``` +

+Trusted by the world's leading companies + + Syncfusion logo + +

+ ## Support Product support is available through following mediums. @@ -35,4 +36,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© 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/data/package.json b/components/data/package.json index 5b9d0d6..a1bf454 100644 --- a/components/data/package.json +++ b/components/data/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-data", "version": "31.1.17", - "description": "A shared React package providing foundational data management classes, utilities, and methods for handling data operations across UI components.", + "description": "Syncfusion React data package provides foundational data management classes, utilities, and methods for handling data operations across UI components.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/dropdowns/README.md b/components/dropdowns/README.md index 3fd51c7..9d70239 100644 --- a/components/dropdowns/README.md +++ b/components/dropdowns/README.md @@ -1,10 +1,16 @@ # React Dropdown Components -## What's Included in the React Dropdown Package +The Syncfusion React Dropdowns package is a feature-rich UI collection for dynamic dropdown interactions in React apps. -The React Dropdown package includes the following list of components. +## Setup + +To install `dropdowns` and its dependent packages, use the following command, + +```sh +npm install @syncfusion/react-dropdowns +``` -### React Dropdown List +## React Dropdown List The Dropdown List component provides a user-friendly interface for selecting a single option from a list of predefined values. It supports rich customization, filtering, and templating features, making it ideal for forms, data filtering, and guided user selections. @@ -33,14 +39,6 @@ Trusted by the world's leading companies

-## Setup - -To install `dropdowns` and its dependent packages, use the following command, - -```sh -npm install @syncfusion/react-dropdowns -``` - ## Support Product support is available through following mediums. @@ -59,5 +57,5 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/dropdowns/package.json b/components/dropdowns/package.json index f68eb5e..45268c2 100644 --- a/components/dropdowns/package.json +++ b/components/dropdowns/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-dropdowns", "version": "31.1.17", - "description": "A package of React Dropdown components", + "description": "Syncfusion React Dropdown package is a feature-rich UI collection for dynamic dropdown interactions in React apps.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/grid/README.md b/components/grid/README.md index df8ccce..b686682 100644 --- a/components/grid/README.md +++ b/components/grid/README.md @@ -1,69 +1,90 @@ -# React Data Grid Component +# Syncfusion React Data Grid Component The **Syncfusion React Data Grid** is a high-performance, feature-rich component designed for building scalable, responsive, and data-intensive web applications. Engineered to meet the requirements of enterprise-grade solutions, it provides a robust architecture that supports dynamic data handling, seamless integration with modern react frameworks, and a highly customizable interface. Ideal for react applications requiring structured data presentation, real-time interaction, and flexible configuration, the grid supports essential functionalities such as sorting, filtering, paging, and editing. Extensibility is achieved through custom templates and a comprehensive API surface, enabling integration with complex business logic and external systems. -Explore the demo [here](https://react.syncfusion.com/grid). - ---- - **Key Features** -- **Sorting** +- **[Sorting](https://react.syncfusion.com/data-grid/sorting):** Enables column-based sorting with support for single and multi-column configurations. Sorting operations are optimized for performance and consistency, allowing structured data to be organized efficiently across large datasets. -- **Filtering** +- **[Filtering](https://react.syncfusion.com/data-grid/filtering/configuration):** Provides a built-in filter bar with customizable filter types per column. Supports text, number, date, and dropdown filters, enabling precise data segmentation and contextual filtering based on business logic. -- **Editing** +- **[Editing](https://react.syncfusion.com/data-grid/editing/configuration):** Facilitates inline CRUD operations including add, edit, and delete actions. Editing is integrated with toolbar controls and supports validation, making it suitable for transactional data entry and real-time updates. -- **Toolbar** +- **[Toolbar](https://react.syncfusion.com/data-grid/editing/configuration#adding-a-toolbar-for-editing):** Offers a configurable toolbar with built-in actions such as Add, Edit, Delete, and Search. Toolbar elements can be extended or replaced with custom components to align with specific operational workflows. -- **Searching** +- **[Searching](https://react.syncfusion.com/data-grid/searching):** Includes a responsive search box within the toolbar for quick data lookup. Supports keyword-based filtering across multiple columns, improving accessibility to relevant records in large datasets. -- **Paging** +- **[Paging](https://react.syncfusion.com/data-grid/paging):** Manages large volumes of data using built-in pagination. Supports both client-side and server-side paging strategies to ensure scalable performance and efficient data navigation in distributed environments. -- **Customization** +- **[Customization](https://react.syncfusion.com/data-grid/columns/cell-customization):** Allows custom cell rendering, conditional styling, and layout adjustments. Enables integration with design systems and branding guidelines, supporting tailored visual experiences and functional enhancements. -- **Template Extensibility** +- **[Template Extensibility](https://react.syncfusion.com/data-grid/columns/templates):** Supports column and row templates for embedding custom components, applying conditional formatting, and creating rich, interactive visual layouts. Template logic can be used to integrate charts, buttons, or nested views within grid cells. -- **Aggregates** +- **[Aggregates](https://react.syncfusion.com/data-grid/aggregates):** Displays summary values such as totals, averages, minimums, and maximums using built-in aggregate functions. Aggregation logic can be customized to support analytical dashboards and reporting interfaces. -- **Interactivity** +- **[Interactivity](https://react.syncfusion.com/data-grid/accessibility#keyboard-shortcuts):** Supports clickable headers, row selection, and keyboard navigation. Enhances engagement through responsive UI behavior and intuitive controls, suitable for complex data exploration scenarios. -- **Accessibility** +- **[Accessibility](https://react.syncfusion.com/data-grid/accessibility):** Compliant with WCAG 2.1 standards, ensuring compatibility with screen readers, keyboard navigation, and assistive technologies. Designed to meet accessibility requirements for public sector and regulated environments. -- **Globalization** +- **[Globalization](https://react.syncfusion.com/data-grid/globalization):** Adapts dates, numbers, currencies, and text formats for international audiences. Includes built-in support for localization and internationalization (i18n), enabling deployment across multilingual and multicultural platforms. -- **Robust API** +- **[Robust API](https://react-api.syncfusion.com/data-grid/overview):** Provides a comprehensive and extensible API for programmatic control over grid behavior, data updates, and event handling. Supports integration with external systems, custom business logic, and advanced workflow automation. -

-Trusted by the world's leading companies - - Syncfusion logo - -

- -## Setup +**Setup** To install `grid` and its dependent packages, use the following command, ```sh npm install @syncfusion/react-grid +``` + +**Usage** + +```tsx +import { Grid, Columns, Column } from '@syncfusion/react-grid'; + +export default function App() { + return ( + + + + + + + + + + ); +}; ``` +**Resources** + +- [Data Grid Demo/Docs](https://react.syncfusion.com/data-grid/overview) +- [Data Grid API](https://react-api.syncfusion.com/data-grid/overview) + +

+Trusted by the world's leading companies + + Syncfusion logo + +

+ ## Support Product support is available through following mediums. @@ -82,4 +103,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/grid/package.json b/components/grid/package.json index 07d03c7..f17cab2 100644 --- a/components/grid/package.json +++ b/components/grid/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-grid", "version": "31.1.17", - "description": "A high-performance React Data Grid component designed for modern web applications.", + "description": "Syncfusion React Data Grid, a high-performance component designed for modern web applications.", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/icons/README.md b/components/icons/README.md index e1075a2..8aaa3d4 100644 --- a/components/icons/README.md +++ b/components/icons/README.md @@ -9,7 +9,30 @@ The React Icon Library is a centralized and scalable collection of SVG-based ico * Icons are exported as lightweight, reusable React functional components. They can be seamlessly embedded in buttons, inputs, navigation items, cards, and other custom components. * With modular exports, only the icons used in your application are included in the final bundle, ensuring optimal performance with minimal overhead. +**Setup** +To install `icons`, use the following command, + +```sh +npm install @syncfusion/react-icons +``` + +**Usage** + +```tsx +import { SearchIcon } from '@syncfusion/react-icons'; + +export default function App() { + return ( + + ); +}; +``` + +**Resources** + +- [Icons Demo/Docs](https://react.syncfusion.com/appearance/icons) +- [Icons API](https://react-api.syncfusion.com/icons/overview)

Trusted by the world's leading companies @@ -18,14 +41,6 @@ Trusted by the world's leading companies

-## Setup - -To install `icons`, use the following command, - -```sh -npm install @syncfusion/react-icons -``` - ## Support Product support is available through following mediums. @@ -41,4 +56,4 @@ Product support is available through following mediums. See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. -© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. +© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution. diff --git a/components/icons/package.json b/components/icons/package.json index e238b2a..8205529 100644 --- a/components/icons/package.json +++ b/components/icons/package.json @@ -1,7 +1,7 @@ { "name": "@syncfusion/react-icons", "version": "31.1.17", - "description": "A common package for React icon components", + "description": "Syncfusion React Icons for React applications", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", "keywords": [ diff --git a/components/inputs/README.md b/components/inputs/README.md index c4cf96b..ead9f77 100644 --- a/components/inputs/README.md +++ b/components/inputs/README.md @@ -1,14 +1,18 @@ # React Input Components -## What's Included in the React Inputs Package +The Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form-validator, designed to capture user input in React applications. -The React Inputs package includes the following list of components. +## Setup -### React Form +To install `inputs` and its dependent packages, use the following command, -The Form component provides comprehensive form validation and state management functionality with built-in validation rules and field interaction tracking. It offers a powerful way to handle complex forms with real-time validation, error handling, and submission management. +```sh +npm install @syncfusion/react-inputs +``` -Explore the demo here +## React Form + +The Form component provides comprehensive form validation and state management functionality with built-in validation rules and field interaction tracking. It offers a powerful way to handle complex forms with real-time validation, error handling, and submission management. **Key features** @@ -24,11 +28,48 @@ Explore the demo (); + + return ( +
console.log(data)} + onFormStateChange={setFormState} + > + + formState?.onChange('username', { value: e.target.value })} + onBlur={() => formState?.onBlur('username')} + onFocus={() => formState?.onFocus('username')} + /> + {formState?.errors?.username && ( +
{formState.errors.username}
+ )} + + + +
+ ); +} +``` -The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns. +**Resources** + +- [Form Demo/Docs](https://react.syncfusion.com/form) +- [Form API](https://react-api.syncfusion.com/form/overview) -Explore the demo [here](https://react.syncfusion.com/numeric-textbox). +## React Numeric TextBox + +The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns. **Key features** @@ -44,11 +85,26 @@ Explore the demo [here](https://react.syncfusion.com/numeric-textbox). - **Keyboard navigation:** Enhanced keyboard support for incrementing/decrementing values using arrow keys. -### React TextArea +**Usage** -The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems. +```tsx +import { NumericTextBox } from "@syncfusion/react-inputs"; + +export default function App() { + return ( + + ); +} +``` -Explore the demo [here](https://react.syncfusion.com/textarea). +**Resources** + +- [Numeric TextBox Demo/Docs](https://react.syncfusion.com/numeric-textbox) +- [Numeric TextBox API](https://react-api.syncfusion.com/numeric-textbox/overview) + +## React TextArea + +The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems. **Key features** @@ -62,11 +118,26 @@ Explore the demo [here](https://react.syncfusion.com/textarea). - **Controlled and uncontrolled modes:** Supports both controlled mode (using the `value` prop) and uncontrolled mode (using the `defaultValue` prop) to accommodate different state management approaches. -### React TextBox +**Usage** -The TextBox component provides a feature-rich input field for collecting user text input with enhanced styling options and validation states. It supports both controlled and uncontrolled input modes to fit various application requirements. +```tsx +import { TextArea } from '@syncfusion/react-inputs'; -Explore the demo [here](https://react.syncfusion.com/textbox). +export default function App() { + return ( +