Kendo UI Dialog for React

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

Overview

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

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

Basic Usage

The Dialog asks users for input, blocking other parts of the page.

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

    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = { welcomeShown: false };
            this.closeHandler = this.onClose.bind(this);
        }

        onClose() {
            this.setState({ welcomeShown: true });
        }

        render() {
            const dialog = (
                <Dialog
                    title="You can do anything."
                    actions={[ { text: "OK" } ]}
                    onClose={this.closeHandler}
                >
                    Welcome to Zombo.com.
                </Dialog>
            );

            return (
                <section>
                    { !this.state.welcomeShown ? dialog : null }

                    <p>Anything at all.</p>
                </section>
            );
        }
    };

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

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

Installation

The Dialog 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-dialog;

Once installed, import the module.

// ES2015 module syntax
import { Dialog } from 'kendo-react-dialog';

// CommonJS format
var Dialog = require('kendo-react-dialog').Dialog;

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

Browser Support

The Dialog works in all browsers supported by the React framework—Internet Explorer 9 and later versions.

Glossary

Below are explained the basic terms that Kendo UI 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.