@progress/kendo-react-inputs 10.0.0-develop.3 → 10.0.0-develop.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +267 -48
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -6,104 +6,322 @@
|
|
|
6
6
|
|
|
7
7
|
> **Important**
|
|
8
8
|
>
|
|
9
|
-
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—
|
|
10
|
-
> -
|
|
11
|
-
> -
|
|
9
|
+
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—an enterprise-grade UI library with 120+ free and premium components.
|
|
10
|
+
> - This package contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs). You can use the free components even in production, no sign-up or license required.
|
|
11
|
+
> - If you're looking for free React components, check out [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free).
|
|
12
|
+
> - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) to learn how to configure your KendoReact licensing.
|
|
13
|
+
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs).
|
|
12
14
|
> - The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!
|
|
13
15
|
>
|
|
14
16
|
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) and speed up your development process!
|
|
15
17
|
|
|
16
18
|
The React Inputs, part of KendoReact, offer a highly customizable interface for users to enter and pick different information. The KendoReact Inputs support different locales and formats.
|
|
17
19
|
|
|
20
|
+
How to start:
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npm install --save @progress/kendo-react-inputs @progress/kendo-drawing @progress/kendo-inputs-common @progress/kendo-licensing @progress/kendo-react-animation @progress/kendo-react-buttons @progress/kendo-react-common @progress/kendo-react-dialogs @progress/kendo-react-intl @progress/kendo-react-labels @progress/kendo-react-popup @progress/kendo-svg-icons
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
|
|
18
27
|
What's in this package (ToC):
|
|
19
28
|
|
|
20
|
-
- [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
- [React Inputs Components Library Features](#react-inputs-components-library-features)
|
|
30
|
+
- [React Checkbox Component (free)](#react-checkbox-component)
|
|
31
|
+
- [React ColorGradient Component (premium)](#react-colorgradient-component)
|
|
32
|
+
- [React ColorPalette Component (free)](#react-colorpalette-component)
|
|
33
|
+
- [React ColorPicker Component (premium)](#react-colorpicker-component)
|
|
34
|
+
- [React FlatColorPicker Component (premium)](#react-colorpicker-component)
|
|
35
|
+
- [React Input Component (free)](#react-input-component)
|
|
36
|
+
- [React MaskedTextBox Component (free)](#react-maskedtextbox-component)
|
|
37
|
+
- [React NumericTextBox Component (free)](#react-numerictextbox-component)
|
|
38
|
+
- [React RadioButton Component (free)](#react-radiobutton-component)
|
|
39
|
+
- [React RadioGroup Component (free)](#react-radiobuttongroup-component)
|
|
40
|
+
- [React RangeSlider Component (premium)](#react-rangeslider-component)
|
|
41
|
+
- [React Rating Component (free)](#react-rating-component)
|
|
42
|
+
- [React Signature Component (premium)](#react-signature-component)
|
|
43
|
+
- [React Slider Component (free)](#react-slider-component)
|
|
44
|
+
- [React Switch Component (free)](#react-switch-component)
|
|
45
|
+
- [React TextArea Component (free)](#react-textarea-component)
|
|
46
|
+
- [React TextBox Component (free)](#react-textbox-component)
|
|
47
|
+
|
|
48
|
+
Additional information:
|
|
49
|
+
|
|
50
|
+
- [Support Options](#support-options)
|
|
51
|
+
- [Resources](#resources)
|
|
52
|
+
- [KendoReact Inputs API](#kendo-react-inputs-api)
|
|
53
|
+
|
|
54
|
+
## React Inputs Components Library Features
|
|
55
|
+
|
|
56
|
+
Among the many features which the KendoReact Inputs deliver are:
|
|
57
|
+
|
|
58
|
+
- **Labels**—To make implementing the KendoReact Inputs as easy as possible, the React UI components come with a built-in Label property, which can be placed before or after the actual element. For scenarios where the built-in label is not suitable, a custom label can be easily applied.
|
|
59
|
+
- **Setting the default value**—Easily configure the initial value that the Inputs render.
|
|
60
|
+
- **Form validation**—Validate input values, set validation requirements (such as minimum and maximum) and prevent the submission of forms which are in an invalid state.
|
|
61
|
+
- **Formats and placeholders**—Control the placeholders for the input field, including custom formats.
|
|
62
|
+
- **Controlled state**—Control the value Inputs.
|
|
63
|
+
- **Accessibility support**—The Inputs are compliant with WAI-ARIA and Section 508.
|
|
64
|
+
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—The KendoReact Inputs, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
|
|
65
|
+
- [Unstyled mode](https://www.telerik.com/kendo-react-ui/components/unstyled)—The KendoReact Inputs support an unstyled mode, offering complete control over the popup appearance.
|
|
38
66
|
|
|
39
67
|
## React Checkbox Component
|
|
40
68
|
|
|
41
|
-
|
|
69
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
70
|
+
|
|
71
|
+
[The KendoReact Checkbox component](https://www.telerik.com/kendo-react-ui/checkbox?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) moves beyond the traditional HTML input element and provides styling that fits with all KendoReact themes, allowing users to maintain a consistent look and feel throughout their entire React application.
|
|
72
|
+
|
|
73
|
+
How to use the Checkbox component in your apps:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { Checkbox } from '@progress/kendo-react-inputs';
|
|
77
|
+
...
|
|
78
|
+
<Checkbox label="Checkbox label" />
|
|
79
|
+
```
|
|
42
80
|
|
|
43
81
|
## React ColorGradient Component
|
|
44
82
|
|
|
45
|
-
|
|
83
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
84
|
+
|
|
85
|
+
[The KendoReact ColorGradient component](https://www.telerik.com/kendo-react-ui/colorgradient?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provides a beautiful and easy-to-use user interface for choosing a gradient color. In some cases, the opacity of the gradient is not required, and you can remove the opacity input to make the component more compact.
|
|
86
|
+
|
|
87
|
+
How to use the ColorGradient component in your apps:
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { ColorGradient } from '@progress/kendo-react-inputs';
|
|
91
|
+
...
|
|
92
|
+
<ColorGradient />
|
|
93
|
+
```
|
|
46
94
|
|
|
47
95
|
## React ColorPalette Component
|
|
48
96
|
|
|
49
|
-
|
|
97
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
98
|
+
|
|
99
|
+
[The KendoReact ColorPalette component](https://www.telerik.com/kendo-react-ui/colorpalette?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) can render all colors and color presets, making it ideal when we have to present the user with all available color options. Rendering a specific color preset is available out of the box. This can save time and code by enabling developers to set just the name of the color preset instead of setting each color individually.
|
|
100
|
+
|
|
101
|
+
How to use the ColorPalette component in your apps:
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import { ColorPalette } from '@progress/kendo-react-inputs';
|
|
105
|
+
...
|
|
106
|
+
<ColorPalette palette="basic" />
|
|
107
|
+
```
|
|
50
108
|
|
|
51
109
|
## React ColorPicker Component
|
|
52
110
|
|
|
53
|
-
|
|
111
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
112
|
+
|
|
113
|
+
[The KendoReact ColorPicker component](https://www.telerik.com/kendo-react-ui/colorpicker?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provides users with an intuitive way of selecting and submitting color values. The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette. Primarily serving accessibility enablement, the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.
|
|
114
|
+
|
|
115
|
+
How to use the ColorPicker component in your apps:
|
|
54
116
|
|
|
55
|
-
|
|
117
|
+
```tsx
|
|
118
|
+
import { ColorPicker } from '@progress/kendo-react-inputs';
|
|
119
|
+
...
|
|
120
|
+
<ColorPicker views={['gradient', 'palette']} /> // Shows both views of the ColorPicker and end users can switch between the two.
|
|
121
|
+
```
|
|
56
122
|
|
|
57
|
-
|
|
58
|
-
|
|
123
|
+
## React FlatColorPicker Component
|
|
124
|
+
|
|
125
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
126
|
+
|
|
127
|
+
[The KendoReact FlatColorPicker component](https://www.telerik.com/kendo-react-ui/flatcolorpicker?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) adds another option for your users to select colors in React applications. It provides a flat view for the React ColorGradient and the React ColorPalette components and adds a header and footer. Unlike the React ColorPicker component, the React FlatColorPicker is not rendered within a popup or dropdown but immediately to the page.
|
|
128
|
+
|
|
129
|
+
How to use the FlatColorPicker component in your apps:
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
import { FlatColorPicker } from '@progress/kendo-react-inputs';
|
|
133
|
+
...
|
|
134
|
+
<FlatColorPicker views={['gradient', 'palette']} /> // Shows both views of the FlatColorPicker and end users can switch between the two.
|
|
135
|
+
```
|
|
59
136
|
|
|
60
137
|
## React Input Component
|
|
61
138
|
|
|
62
|
-
|
|
139
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
140
|
+
|
|
141
|
+
[The React Input](https://www.telerik.com/kendo-react-ui/input?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) component builds on top of a traditional HTML input element and provides additional KendoReact styling to fit with all KendoReact themes, as well as the ability to provide a label as a floating label.
|
|
142
|
+
|
|
143
|
+
How to use the Input component in your apps:
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import { Input } from '@progress/kendo-react-inputs';
|
|
147
|
+
...
|
|
148
|
+
<Input label={'Floating label for the input field'}/>
|
|
149
|
+
```
|
|
63
150
|
|
|
64
151
|
## React MaskedTextBox Component
|
|
65
152
|
|
|
66
|
-
|
|
153
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
154
|
+
|
|
155
|
+
[The KendoReact MaskedTextBox component](https://www.telerik.com/kendo-react-ui/maskedtextbox?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provide built-in masks to not only indicate to the user what kind of format is expected, but can also enforce this mask as the user is inserting data, then validate data when a form is submitted. The React MaskedTextBox supports a set of built-in masks like requiring digits, letters or special symbols and characters, but custom rules can be applied as well.
|
|
156
|
+
|
|
157
|
+
How to use the MaskedTextBox component in your apps:
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
import { MaskedTextBox } from '@progress/kendo-react-inputs';
|
|
161
|
+
...
|
|
162
|
+
<MaskedTextBox
|
|
163
|
+
mask="(999) 000-00-00-00" // Sets a phone number mask with a country prefix.
|
|
164
|
+
/>
|
|
165
|
+
```
|
|
67
166
|
|
|
68
167
|
## React NumericTextBox Component
|
|
69
168
|
|
|
70
|
-
|
|
169
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
170
|
+
|
|
171
|
+
[The KendoReact NumericTextBox component](https://www.telerik.com/kendo-react-ui/numerictextbox?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) allows end users to input or adjust numeric values via typing or spin buttons.
|
|
172
|
+
|
|
173
|
+
How to use the NumericTextBox component in your apps:
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
import { NumericTextBox } from '@progress/kendo-react-inputs';
|
|
177
|
+
...
|
|
178
|
+
<NumericTextBox />
|
|
179
|
+
```
|
|
71
180
|
|
|
72
181
|
## React RadioButton Component
|
|
73
182
|
|
|
74
|
-
|
|
183
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
184
|
+
|
|
185
|
+
[The KendoReact RadioButton component](https://www.telerik.com/kendo-react-ui/radiobutton?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) allows developers to style React RadioButtons to fit the existing KendoReact theme and have a uniform look and feel throughout their entire application.
|
|
75
186
|
|
|
76
|
-
|
|
187
|
+
How to use the RadioButton component in your apps:
|
|
77
188
|
|
|
78
|
-
|
|
189
|
+
```tsx
|
|
190
|
+
import { RadioButton } from '@progress/kendo-react-inputs';
|
|
191
|
+
...
|
|
192
|
+
<RadioButton label="RadioButton Label" />
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## React RadioGroup Component
|
|
196
|
+
|
|
197
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
198
|
+
|
|
199
|
+
[The KendoReact RadioGroup](https://www.telerik.com/kendo-react-ui/radiogroup?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) is a component that is used when two or more options need to be available from a RadioButton. Toggling between horizontal and vertical layouts for the KendoReact RadionGroup component can be done by interacting with a single property.
|
|
200
|
+
|
|
201
|
+
How to use the RadioGroup component in your apps:
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
import { RadioGroup } from '@progress/kendo-react-inputs';
|
|
205
|
+
...
|
|
206
|
+
/**
|
|
207
|
+
* Provide an array of items for the radio buttons within the group.
|
|
208
|
+
*/
|
|
209
|
+
<RadioGroup data={data} />
|
|
210
|
+
```
|
|
79
211
|
|
|
80
212
|
## React RangeSlider Component
|
|
81
213
|
|
|
82
|
-
|
|
214
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
215
|
+
|
|
216
|
+
[The KendoReact RangeSlider component](https://www.telerik.com/kendo-react-ui/rangeslider?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) enables end users to increase, decrease and select a predefined range of values by dragging left and right handles along a track. The React RangeSlider component has a single configuration option to help set the orientation to either vertical or horizontal orientations.
|
|
217
|
+
|
|
218
|
+
How to use the RadioGroup component in your apps:
|
|
219
|
+
|
|
220
|
+
```tsx
|
|
221
|
+
import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
|
|
222
|
+
...
|
|
223
|
+
<RangeSlider
|
|
224
|
+
defaultValue={{ start: 30, end: 70 }}
|
|
225
|
+
step={1}
|
|
226
|
+
min={0}
|
|
227
|
+
max={100}
|
|
228
|
+
>
|
|
229
|
+
{[0, 25, 50, 75, 100].map((perc, i) => (
|
|
230
|
+
<SliderLabel
|
|
231
|
+
key={i}
|
|
232
|
+
position={perc}
|
|
233
|
+
>
|
|
234
|
+
{perc.toString()}
|
|
235
|
+
</SliderLabel>
|
|
236
|
+
))}
|
|
237
|
+
</RangeSlider>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
## React Rating Component
|
|
241
|
+
|
|
242
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
243
|
+
|
|
244
|
+
[The KendoReact Rating component](https://www.telerik.com/kendo-react-ui/rating?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) lets end users provide visual ratings in React apps. The component supports partial ratings (for example, 4.5 stars) and integrates with other UI components like the KendoReact Data Grid.
|
|
245
|
+
|
|
246
|
+
How to use the Rating component in your apps:
|
|
247
|
+
|
|
248
|
+
```tsx
|
|
249
|
+
import { Rating } from '@progress/kendo-react-inputs';
|
|
250
|
+
...
|
|
251
|
+
<Rating />
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
## React Signature Component
|
|
255
|
+
|
|
256
|
+
> This is a KendoReact **premium component** and requires a commercial license or an active trial license.
|
|
257
|
+
|
|
258
|
+
[The KendoReact Signature component](https://www.telerik.com/kendo-react-ui/signature?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) captures handwritten signatures via mouse or touch and submits them in forms, making it ideal for signing documents like financial forms or receipts.
|
|
259
|
+
|
|
260
|
+
How to use the Signature component in your apps:
|
|
261
|
+
|
|
262
|
+
```tsx
|
|
263
|
+
import { Signature } from '@progress/kendo-react-inputs';
|
|
264
|
+
...
|
|
265
|
+
<Signature />
|
|
266
|
+
```
|
|
83
267
|
|
|
84
268
|
## React Slider Component
|
|
85
269
|
|
|
86
|
-
|
|
270
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
271
|
+
|
|
272
|
+
[The KendoReact Slider component](https://www.telerik.com/kendo-react-ui/slider?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) provides a sleek and intuitive UI interface for increasing, decreasing and selecting predefined values by dragging a handle along a track, or selecting a value by utilizing the provided side arrow buttons. Out of the box, the KendoReact Slider can render itself in both horizontal or vertical modes. Switching between the two is as simple as updating a single configuration option.
|
|
273
|
+
|
|
274
|
+
How to use the Slider component in your apps:
|
|
275
|
+
|
|
276
|
+
```tsx
|
|
277
|
+
import { Slider } from '@progress/kendo-react-inputs';
|
|
278
|
+
...
|
|
279
|
+
<Slider
|
|
280
|
+
step={1}
|
|
281
|
+
min={1}
|
|
282
|
+
max={10}
|
|
283
|
+
>
|
|
284
|
+
```
|
|
87
285
|
|
|
88
286
|
## React Switch Component
|
|
89
287
|
|
|
90
|
-
Popularized by iOS, Android, and other mobile operating systems, [the KendoReact Switch component](https://www.telerik.com/kendo-react-ui/
|
|
288
|
+
Popularized by iOS, Android, and other mobile operating systems, [the KendoReact Switch component](https://www.telerik.com/kendo-react-ui/switch?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) lets users toggle between two values: often checked and unchecked states.
|
|
289
|
+
|
|
290
|
+
How to use the Slider component in your apps:
|
|
291
|
+
|
|
292
|
+
```tsx
|
|
293
|
+
import { Switch } from '@progress/kendo-react-inputs';
|
|
294
|
+
...
|
|
295
|
+
<Switch />
|
|
296
|
+
```
|
|
91
297
|
|
|
92
298
|
## React TextArea Component
|
|
93
299
|
|
|
94
|
-
|
|
300
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
95
301
|
|
|
96
|
-
|
|
302
|
+
[The KendoReact TextArea component](https://www.telerik.com/kendo-react-ui/textarea?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) is suitable for any scenario that requires multiple lines of text. The TextArea (also known as Multi-line TextBox) component comes with a built-in character counter, which gives end-users a real-time indication of the number of characters currently typed. The dimensions of the React TextArea component can be defined in multiple ways. This includes setting the initial height of the TextArea component and controlling if the component should automatically resize based on the content entered by the user.
|
|
97
303
|
|
|
98
|
-
|
|
304
|
+
How to use the TextArea component in your apps:
|
|
99
305
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
306
|
+
```tsx
|
|
307
|
+
import { TextArea } from '@progress/kendo-react-inputs';
|
|
308
|
+
...
|
|
309
|
+
<TextArea />
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
## React TextBox Component
|
|
313
|
+
|
|
314
|
+
> This is a **free React component**—no sign-up or license required, even in production.
|
|
315
|
+
|
|
316
|
+
[The KendoReact TextBox component](https://www.telerik.com/kendo-react-ui/components/inputs/textbox?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) is a versatile and more refined alternative to the Input, providing multiple additional props.
|
|
317
|
+
|
|
318
|
+
How to use the TextBox component in your apps:
|
|
319
|
+
|
|
320
|
+
```tsx
|
|
321
|
+
import { TextBox } from '@progress/kendo-react-inputs';
|
|
322
|
+
...
|
|
323
|
+
<TextBox />
|
|
324
|
+
```
|
|
107
325
|
|
|
108
326
|
## Support Options
|
|
109
327
|
|
|
@@ -116,6 +334,7 @@ For any issues you might encounter while working with the KendoReact Inputs, use
|
|
|
116
334
|
## Resources
|
|
117
335
|
|
|
118
336
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
337
|
+
- [Get Started with KendoReact Free: 50+ Free React Components](https://www.telerik.com/kendo-react-ui/components/free)
|
|
119
338
|
- [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
120
339
|
- [API Reference of the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
121
340
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
|
|
@@ -135,7 +354,7 @@ High-level component overview pages
|
|
|
135
354
|
- [React MaskedTextBox Component](https://www.telerik.com/kendo-react-ui/maskedtextbox)
|
|
136
355
|
- [React NumericTextBox Component](https://www.telerik.com/kendo-react-ui/numerictextbox)
|
|
137
356
|
- [React RadioButton Component](https://www.telerik.com/kendo-react-ui/radiobutton)
|
|
138
|
-
- [React
|
|
357
|
+
- [React RadioGroup Component](https://www.telerik.com/kendo-react-ui/radiogroup)
|
|
139
358
|
- [React RangeSlider Component](https://www.telerik.com/kendo-react-ui/rangeslider)
|
|
140
359
|
- [React Rating Component](https://www.telerik.com/kendo-react-ui/rating)
|
|
141
360
|
- [React Signature Component](https://www.telerik.com/kendo-react-ui/signature)
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1741335044,version:"10.0.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "10.0.0-develop.
|
|
13
|
+
publishDate: 1741335044,
|
|
14
|
+
version: "10.0.0-develop.4",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-inputs",
|
|
3
|
-
"version": "10.0.0-develop.
|
|
3
|
+
"version": "10.0.0-develop.4",
|
|
4
4
|
"description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"@progress/kendo-drawing": "^1.21.2",
|
|
29
29
|
"@progress/kendo-inputs-common": "^3.1.0",
|
|
30
30
|
"@progress/kendo-licensing": "^1.5.0",
|
|
31
|
-
"@progress/kendo-react-animation": "10.0.0-develop.
|
|
32
|
-
"@progress/kendo-react-buttons": "10.0.0-develop.
|
|
33
|
-
"@progress/kendo-react-common": "10.0.0-develop.
|
|
34
|
-
"@progress/kendo-react-dialogs": "10.0.0-develop.
|
|
35
|
-
"@progress/kendo-react-intl": "10.0.0-develop.
|
|
36
|
-
"@progress/kendo-react-labels": "10.0.0-develop.
|
|
37
|
-
"@progress/kendo-react-popup": "10.0.0-develop.
|
|
31
|
+
"@progress/kendo-react-animation": "10.0.0-develop.4",
|
|
32
|
+
"@progress/kendo-react-buttons": "10.0.0-develop.4",
|
|
33
|
+
"@progress/kendo-react-common": "10.0.0-develop.4",
|
|
34
|
+
"@progress/kendo-react-dialogs": "10.0.0-develop.4",
|
|
35
|
+
"@progress/kendo-react-intl": "10.0.0-develop.4",
|
|
36
|
+
"@progress/kendo-react-labels": "10.0.0-develop.4",
|
|
37
|
+
"@progress/kendo-react-popup": "10.0.0-develop.4",
|
|
38
38
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
39
39
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
40
40
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"package": {
|
|
61
61
|
"productName": "KendoReact",
|
|
62
62
|
"productCode": "KENDOUIREACT",
|
|
63
|
-
"publishDate":
|
|
63
|
+
"publishDate": 1741335044,
|
|
64
64
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
65
65
|
}
|
|
66
66
|
},
|