Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions components/base/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ 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:

```sh
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:

Expand All @@ -31,7 +31,10 @@ import { Button } from '@syncfusion/react-buttons';
</Provider>
```

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

Expand All @@ -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.

&copy; Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.
&copy; Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.
162 changes: 113 additions & 49 deletions components/buttons/README.md
Original file line number Diff line number Diff line change
@@ -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**

Expand All @@ -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 (
<Button>Default Button</Button>
);
};
```

**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**

Expand All @@ -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 (
<Checkbox label='Checkbox' defaultChecked/>
);
}
```

**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**

Expand All @@ -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 (
<Chip>Anne</Chip>
);
}
```

**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**

Expand All @@ -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 (
<ChipList chips={['Apple', 'Banana', 'Cherry']} selection='Multiple' removable={true} />
);
}
```

**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**

Expand All @@ -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 color={Color.Success} position={FabPosition.BottomLeft}>FAB</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**

<p align="center">
Trusted by the world's leading companies
<a href="https://www.syncfusion.com/">
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
</a>
</p>
```tsx
import { RadioButton } from "@syncfusion/react-buttons";

## Setup
export default function App() {
return (
<RadioButton checked={true} label="Choose this option" name="choices" />
);
}
```

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

Expand All @@ -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.

&copy; Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
&copy; Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.
2 changes: 1 addition & 1 deletion components/buttons/package.json
Original file line number Diff line number Diff line change
@@ -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": [
Expand Down
90 changes: 43 additions & 47 deletions components/calendars/README.md
Original file line number Diff line number Diff line change
@@ -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.

<p align="center">
Trusted by the world's leading companies
<a href="https://www.syncfusion.com/">
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
</a>
</p>


## Setup

To install `Calendars` and its dependent packages, use the following command,

```sh
npm install @syncfusion/react-calendars
```


<p align="center">
Trusted by the world's leading companies
<a href="https://www.syncfusion.com/">
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted… alt="Syncfusion logo">
</a>
</p>

## 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.

&copy; 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.

&copy; Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.

Loading