react-bg

Build Better React Apps Faster

with Native React UI Components - Built from the ground up for React

import React from 'react';
import ReactDOM from 'react-dom';

import { process } from '@progress/kendo-data-query';
import { Grid, GridColumn } from '@progress/kendo-react-grid';

import { data } from './data';

const contactNameCell = (props) => {
    return props.rowType === "data"
        ? (<td role="gridcell" >
            <div
                className="customer-photo"
                style={{ backgroundImage: `url("https://demos.telerik.com/kendo-ui/content/web/Customers/${props.dataItem.CustomerID}.jpg")` }}>
            </div>
            <div className="customer-name">
                {props.dataItem.ContactName}
            </div>
        </td>)
        : null
}

class App extends React.Component {
    state = {
        dataState: {
            skip: 0,
            take: 20
        }
    }
    render() {
        return (
            <Grid
                filterable
                groupable
                sortable
                pageable={{ pageSizes: true, buttonCount: 5 }}
                expandField="expanded"
                data={process(data, this.state.dataState)}
                onDataStateChange={this.handleDataStateChange}
                onExpandChange={this.handleExpandChange}
                {...this.state.dataState}
            >
                <GridColumn field="ContactName" title="Contact Name" cell={contactNameCell} width="240px" />
                <GridColumn field="ContactTitle" title="Contact Title" />
                <GridColumn field="CompanyName" title="Company Name" />
                <GridColumn field="Country" title="Country" width="150px" />
            </Grid>
        );
    }

    handleDataStateChange = (event) => {
        this.setState({ dataState: event.data });
    }
}

ReactDOM.render(<App />, document.getElementById('demo-react-grid'));</p>
import React from 'react';
import ReactDOM from 'react-dom';

import {
    Chart,
    ChartTitle,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartValueAxisItem,
    ChartValueAxis
} from '@progress/kendo-react-charts';

class App extends React.Component {
    categories = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
    series = [{
        name: "India",
        data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
        name: "World",
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
    }, {
        name: "Haiti",
        data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
    }];
    render() {
        return (
            <Chart>
                <ChartTitle text="Gross domestic product growth /GDP annual %/" />
                <ChartLegend position="bottom" />

                <ChartCategoryAxis>
                    <ChartCategoryAxisItem categories={this.categories} />
                    <ChartCategoryAxisItem />
                </ChartCategoryAxis>

                <ChartValueAxis>
                    <ChartValueAxisItem labels={{ format: "{0}%" }} line={{ visible: false }} axisCrossingValue={-10} />
                </ChartValueAxis>

                <ChartSeries>
                    {this.series.map((item, idx) => (
                        <ChartSeriesItem
                            key={idx}
                            type="area"
                            line={{
                                style: "smooth"
                            }}
                            data={item.data}
                            name={item.name}
                        />
                    ))}
                </ChartSeries>
            </Chart>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('demo-react-charts')
)
import React from 'react';
import ReactDOM from 'react-dom';

import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sports = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];

    render() {
        return (
            <div className="row">
                <div className="col-6 ">
                    <p>AutoComplete</p>
                    <AutoComplete data={this.sports} placeholder="Your favorite sport" />
                </div>
                <div className="col-6 ">
                    <p>ComboBox</p>
                    <ComboBox data={this.sports} defaultValue="Basketball" />
                </div>
                <div className="col-6">
                    <p>DropDownList</p>
                    <DropDownList data={this.sports} defaultValue="Basketball" />
                </div>
                <div className="col-6 ">
                    <p>MultiSelect</p>
                    <MultiSelect data={this.sports} defaultValue={["Basketball", "Cricket"]} />
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.getElementById('demo-react-dropdowns')
);
 
 
 

Not getting enough from your UI in React? Augment any React application by adding in our native React components. Use the buttons below to look at our React demos and sign up for a free trial to get access to our support ticketing system!

More demos Learn more Download free trial

How Does Kendo UI Cut Development Time?

Kendo UI delivers everything you need to build beautiful, modern, responsive apps.

  • Native React UI Components

    The Kendo UI for React components are native to React, which means they are built from the ground up and are dependency free. Because of this our components are optimized for React development and are built with the ultimate performance in mind.

    These native React components include our powerful components like the Data Grid, Calendar, Charts, and a long selection of form components. These are all composable so you can precisely configure them to meet your UX needs. They are also extensible which gives you the complete freedom to add to the core functionality if needed.

  • Modern Design & Theme Support

    Kendo UI for React lets you develop apps that look great and fit easily into your existing environment. We support modern design methodologies and themes including Bootstrap v4 and Material right out-of-the-box. Customizing the look and feel to create custom themes is a breeze thanks to the Sass variables that our themes offer, ensuring our UI components can fit in to your application's style and design.

  • State Control Your Way

    Since our native React Components are built for React developers by React developers, our React Components support both Controlled and Uncontrolled modes.

    Uncontrolled State Mode provides the easiest implementation and lets you focus on other aspects of your application in more simple situations.

    Controlled State Mode provides you with full control over how to deal with state within your UI components. This gives you the power to manage state directly or through application state management libraries like Redux.

  • Quickly Augment Any React App

    The Kendo UI for React component library was built to be able to be used in new and existing React applications alike. We developed these components to be able to live in harmony with any existing UI elements or be the de facto set of UI components for your React apps.

    This means that whether you’re building your own UI components, or using open source libraries that follow Material Design or Bootstrap standards, the Kendo UI for React components can be added with the same look and feel.

    Developed with the mindset of helping you cut development time and cost, this library includes a broad range of UI components like our Data Grids, Charts, and navigation elements like Buttons and Drop Downs. All of these components integrate seamlessly with the React framework ecosystem so you can lean on core React concepts while being able to quickly learn how to use Kendo UI for React.

  • Why Should you Trust Kendo UI?

    With a history of over 15 years of developing UI components, Kendo UI for React consists of a team of React experts that know exactly what makes the User Experience of an application tick. This is a team that has seen the evolution of JavaScript throughout the years and has been serving the developer community through all of the changes in JS development by bringing that experience to React.

    Beyond our developers, we also have our dedicated support system which is legendary throughout the industry as top-notch. We take care to ensure that every customer interaction delivers more than expected to ensure you feel well taken care of.

    Let us focus on your UI while you focus on the heart of your application.

part-of-devcraft

Need .NET with your JavaScript?

Flexible Options Matched to Your Development Needs

Our DevCraft package gives you the complete Telerik .NET and Kendo UI JavaScript component libraries in one convenient bundle. Want more? You also get our Reporting and Productivity tools included in DevCraft as well for an outstanding value. Easily build modern, high-performance apps on any web, desktop or mobile platform—fast.

Get started fast by taking advantage of thousands of demos (with source code) as well as comprehensive documentation and a full assortment of VS templates.

Learn more about DevCraft

Support and Learning

Industry leading support services backed by comprehensive documentation and learning resources.

Import-Motorcars
success story

"The Kendo UI controls are pleasing to work with for developers. They're easy to learn. They make developers look great because the final product is polished, professional looking."

Rich Read
Director of Programming, Bayshore Solutions
Watch video
react-blog-post
Blog Post

All Things React

Discover everything from the basics to the cutting-edge of React - Render Props, Context API, Suspense, CSS-in-JS, Progressive Web Apps, UI Libraries and more.

Great JavaScript components for fast and high quality web app development. Kendo UI is very easy to use and very fast to get results from.

GoranBajer
Goran Bajer Software Developer, U.S. Government

After being in the industry for over 20 years I have seen a lot of frameworks come and go, but Kendo UI is by far the best for hybrid/mobile/native apps. Not only for its ease of use but it plays well with others.

GeovanniHudson
Geovanni Hudson Sr. Web/UI Application Engineer, PCYC

As a developer working for the DOD we were able to rapidly integrate Kendo UI into a pre-existing C# application providing functionality to the client they were not even aware they wanted. This cut down majorly on cost saving roughly 1+ million. I would recommend Kendo UI to anyone who wants to impress their client with amazing UI.
Thanks Telerik Team!

GeraldHirsch
Gerald Hirsch Front End Developer, U.S. Government

Get Started