@telerik/kendo-react-inputs v0.1.3
Kendo UI Inputs for React
Overview
This repository contains the source code and documentation of the Kendo UI Inputs package for React.
Currently, it includes the Slider component.
Telerik works on porting the ones listed below too:
- ColorPicker
- MaskedTextBox
- NumericTextBox
- Switch
For more information on upcoming Inputs features, refer to the Roadmap.
Basic Usage
The Slider lets users select a value from a predefined range. These values can be increased or decreased over a pre-defined step by dragging a handle along the track, or by clicking the side arrow buttons.
<div id="app"></div> class SliderContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
max: 10,
min: 0,
step: 2
};
}
onChange(e) {
this.setState({
value: e.value
});
}
render() {
return (
<Slider
max = {this.state.max}
min = {this.state.min}
onChange = {this.onChange}
smallStep = {this.state.step}
/>);
}
}
ReactDOM.render(
<SliderContainer />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Slider documentation.
Installation
The Inputs components are published as a public scoped NPM package in the Telerik organization in http://npmjs.org/.
Install it using NPM.
npm install --save @telerik/kendo-react-inputs;Once installed, import the module.
// ES2015 module syntax
import {Slider} from 'kendo-react-inputs';// CommonJS format
var Slider = require('kendo-react-inputs').Slider;Browser Support
The Inputs components work in all browsers supported by the React framework—Internet Explorer 9 and later versions.
Glossary
Below are explained the basic terms the suite for React applies.
Component
A Component refers to a React Component.
Package
A package contains one or more components, developed in a single repository and distributed in a single NPM package. For example, the Slider, MaskedTextBox, NumericTextBox, and Switch components for React are part of the Inputs Package.