Skip to content

Commit 54d3fdd

Browse files
PiramanayagamSyncfusionPiramanayagamSyncfusion
authored
Merge pull request #1 from Mohamed7Imran/master
Pure React Components release packages committed
2 parents ca13d37 + 6d0b53b commit 54d3fdd

File tree

229 files changed

+35912
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

229 files changed

+35912
-2
lines changed

‎README.md‎

Lines changed: 255 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,255 @@
1-
# react-ui-components
2-
Syncfusion React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 14+ UI components that every applications will ever need.
1+
# Syncfusion Pure React UI Components Library
2+
3+
Syncfusion Pure React UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 15+ UI components that every applications will ever need.
4+
5+
> 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).
6+
7+
> 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.
8+
9+
See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
10+
11+
12+
## Resources
13+
* [Getting Started](https://react.syncfusion.com/getting-started/introduction)
14+
* [View Online Demos](https://react.syncfusion.com/button)
15+
16+
## Pure React Components highlights
17+
18+
### Built for Modern React
19+
These components are built entirely using React’s modern architecture, leveraging functional components and hooks rather than relying on class-based components, wrappers. This ensures seamless integration with any modern React application and gives developers full control using idiomatic React patterns.
20+
21+
### Fully Reactive by Design
22+
Components automatically respond to state and prop changes without manual refreshes, ensuring predictable UI updates.
23+
24+
### Smarter Rendering for Better UX
25+
Optimized rendering logic refreshes only what’s necessary, improving performance and user experience.
26+
27+
### Active State Preservation
28+
Interactions like focused inputs or selected items remain intact even when the surrounding state changes. This preserves the user's context and ensures a consistent, uninterrupted experience.
29+
30+
### Native Template Rendering
31+
Templates are rendered using pure JSX, in line with React’s rendering lifecycle.
32+
33+
### Performance-Driven Architecture
34+
From architecture to execution, every detail has been considered to boost performance. With fewer renders, leaner updates, and smarter state handling, apps feel faster and more responsive.
35+
36+
### Material 3 Theming
37+
Built-in Material 3 stylesheets provide a modern, accessible design out of the box. Enjoy sharp visuals, consistent theming, and minimal setup.
38+
39+
## Control List
40+
41+
### Buttons
42+
43+
<table>
44+
<tr>
45+
<td>
46+
<b>Button</b>
47+
</td>
48+
<td rowspan="4">
49+
<a href="https://www.npmjs.com/package/@syncfusion/react-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-buttons" title="@syncfusion/react-buttons" style="height:20px;" />
50+
</td>
51+
<td>
52+
<a href="components/buttons/src/button">Source</a>
53+
</td>
54+
<td>
55+
<a href="https://react.syncfusion.com/button">Live demo</a>
56+
</td>
57+
</tr>
58+
<tr>
59+
<td>
60+
<b>Chip</b>
61+
</td>
62+
<td>
63+
<a href="components/buttons/src/chip">Source</a>
64+
</td>
65+
<td>
66+
<a href="https://react.syncfusion.com/chip">Live demo</a>
67+
</td>
68+
</tr>
69+
<tr>
70+
<td>
71+
<b>ChipList</b>
72+
</td>
73+
<td>
74+
<a href="components/buttons/src/chipList">Source</a>
75+
</td>
76+
<td>
77+
<a href="https://react.syncfusion.com/chiplist">Live demo</a>
78+
</td>
79+
</tr>
80+
<tr>
81+
<td>
82+
<b>Floating Action Button</b>
83+
</td>
84+
<td>
85+
<a href="components/buttons/src/floating-action-button">Source</a>
86+
</td>
87+
<td>
88+
<a href="https://react.syncfusion.com/floating-action-button">Live demo</a>
89+
</td>
90+
</tr>
91+
<tr>
92+
<td>
93+
<b>Dropdown Button</b>
94+
</td>
95+
<td rowspan="2">
96+
<a href="https://www.npmjs.com/package/@syncfusion/react-splitbuttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-splitbuttons" title="@syncfusion/react-splitbuttons" style="height:20px;" />
97+
</td>
98+
<td>
99+
<a href="components/splitbuttons/src/dropdown-button">Source</a>
100+
</td>
101+
<td>
102+
<a href="https://react.syncfusion.com/dropdown-button">Live demo</a>
103+
</td>
104+
</tr>
105+
<tr>
106+
<td>
107+
<b>Split Button</b>
108+
</td>
109+
<td>
110+
<a href="components/splitbuttons/src/split-button">Source</a>
111+
</td>
112+
<td>
113+
<a href="https://react.syncfusion.com/split-button">Live demo</a>
114+
</td>
115+
</tr>
116+
</table>
117+
118+
### Notifications
119+
120+
<table>
121+
<tr>
122+
<td>
123+
<b>Toast</b>
124+
</td>
125+
<td rowspan="3">
126+
<a href="https://www.npmjs.com/package/@syncfusion/react-notifications"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-notifications" title="@syncfusion/react-notifications" style="height:20px;" />
127+
</td>
128+
<td>
129+
<a href="components/notifications/src/toast">Source</a>
130+
</td>
131+
<td>
132+
<a href="https://react.syncfusion.com/toast">Live demo</a>
133+
</td>
134+
</tr>
135+
<tr>
136+
<td>
137+
<b>Skeleton</b>
138+
</td>
139+
<td>
140+
<a href="components/notifications/src/skeleton">Source</a>
141+
</td>
142+
<td>
143+
<a href="https://react.syncfusion.com/skeleton">Live demo</a>
144+
</td>
145+
</tr>
146+
<tr>
147+
<td>
148+
<b>Message</b>
149+
</td>
150+
<td>
151+
<a href="components/notifications/src/message">Source</a>
152+
</td>
153+
<td>
154+
<a href="https://react.syncfusion.com/message">Live demo</a>
155+
</td>
156+
</tr>
157+
</table>
158+
159+
### Inputs
160+
161+
<table>
162+
<tr>
163+
<td>
164+
<b>Numeric TextBox</b>
165+
</td>
166+
<td rowspan="3">
167+
<a href="https://www.npmjs.com/package/@syncfusion/react-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-inputs" title="@syncfusion/react-inputs" style="height:20px;" />
168+
</td>
169+
<td>
170+
<a href="components/inputs/src/numerictextbox">Source</a>
171+
</td>
172+
<td>
173+
<a href="https://react.syncfusion.com/numeric-textbox">Live demo</a>
174+
</td>
175+
</tr>
176+
<tr>
177+
<td>
178+
<b>TextBox</b>
179+
</td>
180+
<td>
181+
<a href="components/inputs/src/textbox">Source</a>
182+
</td>
183+
<td>
184+
<a href="https://react.syncfusion.com/textbox">Live demo</a>
185+
</td>
186+
</tr>
187+
<tr>
188+
<td>
189+
<b>TextArea</b>
190+
</td>
191+
<td>
192+
<a href="components/inputs/src/textarea">Source</a>
193+
</td>
194+
<td>
195+
<a href="https://react.syncfusion.com/textarea">Live demo</a>
196+
</td>
197+
</tr>
198+
<tr>
199+
<td>
200+
<b>Checkbox</b>
201+
</td>
202+
<td rowspan="3">
203+
<a href="https://www.npmjs.com/package/@syncfusion/react-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-buttons" title="@syncfusion/react-buttons" style="height:20px;" />
204+
</td>
205+
<td>
206+
<a href="components/buttons/src/button">Source</a>
207+
</td>
208+
<td>
209+
<a href="https://react.syncfusion.com/checkbox">Live demo</a>
210+
</td>
211+
</tr>
212+
<tr>
213+
<td>
214+
<b>Radio Button</b>
215+
</td>
216+
<td>
217+
<a href="components/buttons/src/radio-button">Source</a>
218+
</td>
219+
<td>
220+
<a href="https://react.syncfusion.com/radio-button">Live demo</a>
221+
</td>
222+
</tr>
223+
</table>
224+
225+
### Layout
226+
227+
<table>
228+
<tr>
229+
<td>
230+
<b>Tooltip</b>
231+
</td>
232+
<td>
233+
<a href="https://www.npmjs.com/package/@syncfusion/react-popups"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/react-popups" title="@syncfusion/react-popups" style="height:20px;" />
234+
</td>
235+
<td>
236+
<a href="components/popups/src/tooltip">Source</a>
237+
</td>
238+
<td>
239+
<a href="https://react.syncfusion.com/tooltip">Live demo</a>
240+
</td>
241+
</tr>
242+
</table>
243+
244+
## Support
245+
Product support is available for through following mediums.
246+
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=react-ui-components) support system or [Community forum](https://www.syncfusion.com/forums/pure-react?utm_source=npm&utm_campaign=react-ui-components).
247+
* New [GitHub issue](https://github.com/syncfusion/react-ui-components/issues/new).
248+
* Ask your query in [Stack Overflow](https://stackoverflow.com/) with tag `syncfusion` and `react-pure`.
249+
## License
250+
Check the license detail [here](https://github.com/syncfusion/react-ui-components/blob/master/license).
251+
252+
## Changelog
253+
Check the changelog [here](https://react-api.syncfusion.com/api/release-notes/29.2.4).
254+
255+
&copy; Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

‎components/base/CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Changelog
2+
3+
## [Unreleased]

‎components/base/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# React Base Library
2+
3+
A common package of Essential® studio react components which contains base libraries, providers and functions.
4+
5+
**Key Features**
6+
7+
* Animation
8+
* Ripple
9+
* Internationalization
10+
* Localization
11+
* Right to Left
12+
13+
<p align="center">
14+
Trusted by the world's leading companies
15+
<a href="https://www.syncfusion.com/">
16+
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
17+
</a>
18+
</p>
19+
20+
## Setup
21+
22+
To install `base` and its dependent packages, use the following command,
23+
24+
```sh
25+
npm install @syncfusion/react-base
26+
```
27+
28+
## Support
29+
30+
Product support is available through following mediums.
31+
32+
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
33+
* Live chat
34+
35+
## Changelog
36+
Check the changelog [here](https://github.com/syncfusion/react-ui-components/blob/master/components/base/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
37+
38+
## License and copyright
39+
40+
> 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).
41+
42+
> 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.
43+
44+
See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
45+
46+
&copy; Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

‎components/base/gulpfile.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
var gulp = require('gulp');
2+
const sass = require('gulp-sass')(require('sass'));
3+
4+
/**
5+
* Compile ts files
6+
*/
7+
gulp.task('scripts', function(done) {
8+
var ts = require('gulp-typescript');
9+
var tsProject = ts.createProject('./tsconfig.json', {
10+
typescript: require('typescript'),
11+
declaration: true
12+
});
13+
var tsResult = gulp.src(['./src/**/*.ts','./src/**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' })
14+
.pipe(tsProject());
15+
tsResult.js.pipe(gulp.dest('./'))
16+
.on('end', function() {
17+
tsResult.dts.pipe(gulp.dest('./'))
18+
.on('end', function() {
19+
done();
20+
});
21+
});
22+
});
23+
24+
/**
25+
* Compile styles
26+
*/
27+
let isCompiled = true;
28+
gulp.task('styles', function (done) {
29+
var styles = './styles/**/*.scss';
30+
return gulp.src(styles, { base: './' })
31+
.pipe(sass({
32+
outputStyle: 'expanded',
33+
includePaths: "./node_modules/@syncfusion/"
34+
}).on('error', function (error) {
35+
isCompiled = false;
36+
console.log(error);
37+
this.emit('end');
38+
}))
39+
.pipe(gulp.dest('.'))
40+
.on('end', function () {
41+
if (!isCompiled) {
42+
process.exit(1);
43+
}
44+
done();
45+
});
46+
});
47+
48+
/**
49+
* Build ts and scss files
50+
*/
51+
gulp.task('build', gulp.series('scripts', 'styles'));
52+

‎components/base/license‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Syncfusion® License
2+
3+
Copyright (c) Syncfusion®, Inc. All rights reserved.
4+
5+
Essential® JS 2 library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
6+
7+
To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®’s terms and conditions.
8+
9+
If you do not meet the requirements for the community license, please reach out to [email protected] for commercial licensing options.
10+
11+
You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
12+
13+
The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

0 commit comments

Comments
 (0)