# react-kendo

> React Component Library for Kendo UI Widgets. There exists a React Component named for every Kendo widget in the kendo.ui namespace. Tested on React 0.12 and KendoUI 2014.3.1411.

Latest version **0.13.11** (published 2015-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-kendo
pnpm add react-kendo
yarn add react-kendo
bun add react-kendo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.11 |
| Published | 2015-05-21 |
| First published | 2015-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 62 |
| Author | Travis Webb |
| Maintainers | tjwebb |
| Keywords | react, kendo, react.js, react-component, kendo-ui, telerik, components, widgets |

## Links

- npm: https://www.npmjs.com/package/react-kendo
- Repository: https://github.com/tjwebb/react-kendo
- Issues: https://github.com/tjwebb/react-kendo/issues
- npm.io page: https://npm.io/package/react-kendo

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.13.11 (latest) — 2015-05-21
- 0.13.10 — 2015-04-28
- 0.13.8 — 2015-04-28
- 0.13.9 — 2015-04-28
- 0.13.7 — 2015-04-28
- 0.13.6 — 2015-04-23
- 0.13.1 — 2015-04-09
- 0.12.10 — 2015-04-09
- 0.13.0 — 2015-04-09
- 0.12.8 — 2015-03-14
- 0.12.7 — 2015-03-09
- 0.12.6 — 2015-03-08
- 0.12.5 — 2015-03-05
- 0.12.4 — 2015-03-03
- 0.12.3 — 2015-03-02
- … 6 more at https://npm.io/package/react-kendo/versions

## README

# react-kendo

[![npm version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Dependency Status][daviddm-image]][daviddm-url]

React Component Library for Kendo UI Widgets. There exists a React Component
named for every Kendo widget in the
[kendo.ui](http://docs.telerik.com/kendo-ui/api/javascript/ui/ui) namespace.
Tested on React 0.13 and KendoUI 2014.3.1411.

## Install

```sh
$ npm install react-kendo --save
```

```html
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
  <link href='http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css' rel='stylesheet'>
  <!-- and so forth... -->
```

Please note: Kendo Professional Components require
[a License](http://www.telerik.com/purchase/kendo-ui).

## Usage
```js
var React = require('react');
var k = React.Kendo = require('react-kendo');

/**
 * Instead of, e.g.
 * $('#my-splitter').kendoSplitter(splitterOptions);
 */
var splitterOptions = {
  orientation: 'horizontal',
  panes: [
    { collapsible: false, size: '300px' },
    { resizable: true }
  ]
};
var treeOptions = { /* ... */ };
var gridOptions = { /* ... */ };

var Workstation = React.createClass({
  render: function () {
    return (
      <k.Splitter options={splitterOptions}>
        <k.TreeView options={treeOptions} />
        <k.Grid options={gridOptions} />
      </k.Splitter>
    );
  }
});
```

## Properties

### `options`
The main Kendo options object that is sent into the constructor. e.g.
`$('#my-splitter').kendoSplitter(options);`

### `tag`
The `tag` property specifies the html tag that the Kendo widget will be bound
to. This is `div` by default, but can be set to
[any tag supported by React](http://facebook.github.io/react/docs/tags-and-attributes.html#html-elements).

### `reactive`
Version 0.13 and later support automatically re-initializing the Kendo Widget
when the `options` property is updated. This is useful for re-loading Grids
with new data, among other things. This is `false` by default.

### `debug`
Set `debug=true` to log detailed information on the lifecycle events of your
react-kendo component.

## Additional Components

### `React.Kendo.Template`

A React Component that represents a [Kendo Template](http://docs.telerik.com/kendo-ui/framework/templates/overview).
Easily create a Kendo Template from a React Component. Additionally mixin
`React.Kendo.TemplateMixin`.

```js
var k = React.Kendo;
var MyListItem = React.createClass({
  mixins: [
    k.TemplateMixin
  ],
  render: function () {
    var item = this.props.item;
    return (
      <span>{item.title}</span>
    );
  }
});
var KendoList = React.createClass({
  render: function () {
    return (
      <k.ListView options={
        template: function (item) {
          return k.Template(<MyListItem item={item} />);
        }
      } />
    );
  }
});
```

### `React.Kendo.RowTemplate`

Use this component for Kendo Grid [Row
Templates](http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-rowTemplate).

```js
var MyGridRow = React.createClass({
  mixins: [
    k.TemplateMixin
  ],
  render: function () {
    var row = this.props.row;
    return (
      <span>{row.myField}</span>
    );
  }
});
var KendoList = React.createClass({
  render: function () {
    return (
      <k.Grid options={
        template: function (row) {
          return k.RowTemplate(<MyGridRow row={row} />);
        }
      } />
    );
  }
});
```

## Supplemental Functions

`react-kendo` also includes some extra functionality that isn't included in
Kendo. These functions are added to the Kendo components via React mixins.


### `Grid.enableDraggableRows(group, options)`

Invoke this function to make Grid rows draggable. This is not possible by
default in the kendo-ui library.

```js
var k = React.Kendo;
var KendoList = React.createClass({
  componentDidMount: function () {
    this.refs.grid.enableDraggableRows('myGroup', {
      drag: function (e) {
        // some custom stuff
      }
    });
  },
  render: function () {
    return (
      <k.Grid ref='grid' options={...} />
    );
  }
});
```


## License
MIT

[npm-image]: https://img.shields.io/npm/v/react-kendo.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-kendo
[travis-image]: https://img.shields.io/travis/tjwebb/react-kendo.svg?style=flat-square
[travis-url]: https://travis-ci.org/tjwebb/react-kendo
[daviddm-image]: http://img.shields.io/david/tjwebb/react-kendo.svg?style=flat-square
[daviddm-url]: https://david-dm.org/tjwebb/react-kendo

---
_Source: https://npm.io/package/react-kendo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._