@telerik/kendo-react-dialog v1.0.0

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 component 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
                    modal
                    actions={[ "OK" ]}
                    title="You can do anything."
                    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 section.

Installation

The React 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;

Browser Support

The Kendo UI Dialog component for React supports all browsers that are 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. For example, the Kendo UI Slider, MaskedTextBox, NumericTextBox, and Switch components for React are part of the Inputs Package.