Kendo UI Popup for React
Overview
This repository contains the source code and documentation of the Kendo UI Popup component for React.
For more information on upcoming Popup features, refer to the Roadmap.
Basic Usage
The Popup enables you to position a specific content next to a pre-defined anchor element.
<div id="app"></div>
class BasicDemo extends React.Component {
constructor(props) {
super(props);
this.state = { show: false };
}
onClick = () => {
this.setState({
show: !this.state.show
});
}
render() {
const { show } = this.state.show;
return (
<div>
<button onClick={this.onClick} ref="anchor">Toggle</button>
<KendoReactPopup anchor={this.refs.anchor} show={show}>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</KendoReactPopup>
</div>
);
}
}
ReactDOM.render(
<BasicDemo />,
document.getElementById('app')
);For more examples and available configuration options, refer to the Popup documentation.
Installation
The Popup 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-popup;Once installed, import the module.
// ES2015 module syntax
import Popup from 'kendo-react-popup';// CommonJS format
var Popup = require('kendo-react-popup');Browser Support
The Popup supports 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.