This package is now deprecated and has been archived. For the current version of the Kendo UI Inputs for React, refer to the official website

Kendo UI Inputs for React

• Overview
• Basic Usage
• Installation
• Browser Support
• Glossary
  • Component
  • Package

Overview

This repository contains the source code and documentation of the Kendo UI Inputs package for React.

Currently, the package includes the Slider and Switch components.

We are working on porting the ones listed below too:

• ColorPicker
• MaskedTextBox
• NumericTextBox

For more information on upcoming Inputs features, refer to the Roadmap.

Basic Usage

Kendo UI Slider

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.

Kendo UI Switch

The Switch is a component that lets the user toggle between checked and unchecked states.

    <div id="app"></div>

    class SwitchContainer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                checked: false,
                disabled: false,
                onLabel: 'ON',
                offLabel: 'OFF'
            };
        }
        onChange = (e) => {
            this.setState({
                checked: e.checked
            });
        };
        render() {
            return (
                <Switch
                    checked={this.state.checked}
                    disabled={this.state.disabled}
                    offLabel={this.state.offLabel}
                    onChange={this.onChange}
                    onLabel={this.state.onLabel}
                />
            );
        }
    }
    ReactDOM.render(
        <SwitchContainer />,
        document.getElementById('app')
    );

For more examples and available configuration options, refer to the Switch documentation section.

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, Switch} from 'kendo-react-inputs';

// CommonJS format
var Slider = require('kendo-react-inputs').Slider;
var Switch = require('kendo-react-inputs').Switch;

To install the npm package, it is recommended that you use Node.js 5.0.0 or later versions.

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.