Kendo UI Draggable for React

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

Overview

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

Currently, it includes the Draggable component.

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

Basic Usage

The Draggable is a higher-order React component that wraps the Kendo UI Draggable abstraction.

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

import * as React from 'react';
import ReactDOM from 'react-dom';
import Draggable from '@telerik/kendo-react-draggable';

class Component extends React.Component {
    static propTypes = {
        pageX: React.PropTypes.number,
        pageY: React.PropTypes.number,
        pressed: React.PropTypes.bool
    };

    constructor(props) {
        super(props);
    }

    render() {
        if (this.props.pressed) {
            return (<div {...this.props} style={{ color: "red" }}>
                <div>PageX: {this.props.pageX}</div>
                <div>PageY: {this.props.pageY}</div>
            </div>);
        }

        return <span>Press me</span>;
    }
}

const DraggableComponent = Draggable(Component);

ReactDOM.render(
    <DraggableComponent />,
        document.getElementById('app')
);

For more information on the underlying Draggable implementation, check the README.md of the Kendo UI Draggable package.

Installation

The Draggable is 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-draggable;

Once installed, import the module.

// ES2015 module syntax
import Draggable from '@telerik/kendo-react-draggable';

// CommonJS format
var Draggable = require('@telerik/kendo-react-draggable');

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

Browser Support

The Draggable component supports the following browsers:

• Google Chrome
• Firefox
• Safari (OS X)
• Safari (iOS)
• Chrome (Android)
• IE/Edge

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.