KendoReact UI Library for ReactJS: What You Need to Know
Tags: javascript, kendoui, react, beginners
Published: 2022-04-29 11:02:01

[KendoReact](https://www.telerik.com/kendo-react-ui/?utm_medium=referral&utm_source=dev.to&utm_campaign=kendoreact-ui-library-reactjs-what-you-need-to-know) is a commercial React component library developed by Progress Telerik that enables swift development of React UI (user interface). While it can be useful for projects of any size, it saves the most time and stress when we’re building complex, data intense business applications. KendoReact is part of the [Kendo UI](https://www.telerik.com/kendo-ui) bundle, which also includes native UI component libraries for [jQuery](https://www.telerik.com/kendo-jquery-ui), [Vue](https://www.telerik.com/kendo-vue-ui) and [Angular](https://www.telerik.com/kendo-angular-ui).

In this article, we will be focusing on the ReactJS framework only. We will be going over some of the KendoReact components and features, styling and themes.

Let's begin with an overview of the components KendoReact offers.

## KendoReact Components

KendoReact offers more than 100 UI components, ranging from [React Data Grid]([https://www.telerik.com/kendo-react-ui/grid/](https://www.telerik.com/kendo-react-ui/grid/)) and [Scheduler](https://www.telerik.com/kendo-react-ui/scheduler/) to [Buttons]([https://www.telerik.com/kendo-react-ui/components/buttons/](https://www.telerik.com/kendo-react-ui/components/buttons/)) and [DropDowns]([https://www.telerik.com/kendo-react-ui/components/dropdowns/](https://www.telerik.com/kendo-react-ui/components/dropdowns/)). Moving forward, we have to play around with some of the components; to do that, we need to create a React application and install the KendoReact library.

**Installation**
Firstly, enter the command below in your terminal to create a project, move into the project directory and start the project.

```SHELL
npx create-react-app kendo-react-demo --use-npm
cd my-app
npm start
```

To use any KendoReact component, we need to install the respective npm package. KendoReact works with tree shaking so only the aspects of KendoReact that are used and imported will count towards the size of your overall JavaScript bundle.

The following command will install the [React Dialog](https://www.telerik.com/kendo-react-ui/dialog/) and [React Button](https://www.telerik.com/kendo-react-ui/button/) components, which we will be using for this demonstration.

```SHELL
npm install --save @progress/kendo-react-dialogs ---save @progress/kendo-react-buttons
```

After successfully installing the above components, we can begin by importing them to the app.js file. But, before that, ensure the code in the `app.js` file is completely erased.

Now let’s create a micro UI by copying and pasting the code below into the app.js file:

```JS
import React, { useState } from "react";
import { Button } from "@progress/kendo-react-buttons";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";

const KendoComponents = () => {
    return (
    <div
    </div>
    );
};
export default KendoComponents;
```

We started by importing the Button component, then the Dialog and DialogActionBar from their respective modules. In the next section, we will be building a UI using those imported components.

## Styling and Themes

KendoReact allows developers to define the styling for their components however they see fit, which creates excellent flexibility around it. Styling a component in KendoReact is similar to styling in React.js. For demonstration, we will use the code below.

```JS
import React, { useState } from "react";
import { Button } from "@progress/kendo-react-buttons";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
const KendoComponents = () => {
    const [visible, setVisible] = useState(true);
    const toggleDialog = () => {
    setVisible(!visible);
    };
    return (
    <div
    style={{
    margin: "100px 300px",
    width: "200px",
    }}
    >
    <Button
    style={{
        margin: "5px",
        padding: "5px 35px",
    }}
    onClick={toggleDialog}
    >
    {visible ? "Close dialog" : "Open dialog"}
    </Button>
    {visible && (
    <Dialog
        style={{
        margin: "100px 300px",
        padding: "25px",
        width: "350px",
        backgroundColor: "rgba(0,0,0,0.5)",
        }}
        title={"Please confirm"}
        onClose={toggleDialog}
    >
        <p
        style={{
        margin: "25px",
        width: "300px",
        }}
        >
        Are you sure you want to continue?
        </p>
        <DialogActionsBar>
        <Button
        style={{
        margin: "5px",
        padding: "5px 35px",
        }}
        onClick={toggleDialog}
        >
        No
        </Button>
        <Button
        style={{
        margin: "5px",
        padding: "5px 35px",
        }}
        onClick={toggleDialog}
        >
        Yes
        </Button>
        </DialogActionsBar>
    </Dialog>
    )}
    </div>
    );
};
export default KendoComponents;
```

In the code above, we created a `toggleDialog` function, which we used in toggling the visible variable value between visible and not visible by calling the `setVisible` function. Next, we added some style props to the components we imported from KendoReact. These props helped KendoReact style the underlying JSX how we see fit.

![](https://paper-attachments.dropbox.com/s_C08203494237822F25DC76C9FFCF096467D15E87ADEAEFB888A40A71DAEB6952_1641730642948_iExgcdPx.jpeg)
![](https://paper-attachments.dropbox.com/s_C08203494237822F25DC76C9FFCF096467D15E87ADEAEFB888A40A71DAEB6952_1641730690049_dHTObWJU.jpeg)

KendoReact contains different themes that are available through npm installation. Below is the list of available themes you can use in your application:

- [Default theme](https://www.telerik.com/kendo-react-ui/components/styling/theme-default/), installed using the following command:
    npm install --save @progress/kendo-theme-default

- [Bootstrap theme](https://www.telerik.com/kendo-react-ui/components/styling/theme-bootstrap/), installed using the following command:
    npm install --save @progress/kendo-theme-bootstrap

- [Material theme](https://www.telerik.com/kendo-react-ui/components/styling/theme-material/), installed using the following command:
    npm install --save @progress/kendo-theme-material

These enable developers familiar with any of these themes to quickly port the knowledge they have into KendoReact. KendoReact ships a source file along, which can be [optionally used to customize the themes]([https://www.telerik.com/kendo-react-ui/components/styling/customizing/](https://www.telerik.com/kendo-react-ui/components/styling/customizing/)), and this file is available in the SCSS folder of the theme package.

## Third-Party Libraries

In the React ecosystem, KendoReact delivers components for UI development.

Apart from the components providing various options for high-level customization, the React framework implements a full-based approach that enables the KendoReact suite's flexibility, allowing for the neat integration of the KendoReact components with almost all libraries that are related to the React framework.

This [Third-Party Libraries](https://www.telerik.com/kendo-react-ui/components/integration/) documentation aims to demonstrate how KendoReact approaches the integration with libraries you want to use in working with their components. More integration demos are being gradually added to the documentation due to the vast number of available third-party libraries for React.

Below is a list of available third-party library integration demonstrations.

- [GraphQL](https://www.telerik.com/kendo-react-ui/components/integration/graphql/)
- [Material UI](https://www.telerik.com/kendo-react-ui/components/integration/material-ui/)
- [NextJS](https://www.telerik.com/kendo-react-ui/components/integration/nextjs/)
- [React Final Form](https://www.telerik.com/kendo-react-ui/components/integration/react-final-form/)
- [Redux Form](https://www.telerik.com/kendo-react-ui/components/integration/redux-form/)
- [Redux Store](https://www.telerik.com/kendo-react-ui/components/integration/redux-store/)
- [Redux Undo](https://www.telerik.com/kendo-react-ui/components/integration/redux-undo/)
- [SharePoint](https://www.telerik.com/kendo-react-ui/components/integration/sharepoint-spfx/)

## Globalization

Globalization is a process that combines the adaptation to specific cultures (internationalization) with their translation of component messages (localization).

In KendoReact, [globalization](https://www.telerik.com/kendo-react-ui/components/intl/) is enabled through:

- The [Internationalization](https://www.telerik.com/kendo-react-ui/components/intl/i18n/) package—Provides services for formatting and parsing of numbers and dates.
- The [Localization](https://www.telerik.com/kendo-react-ui/components/intl/l10n/) options—Provide the infrastructure for applying from right to left (RTL) and support rendering the messages of the components.

For a list of components that support localization and internationalization, visit [this page](https://www.telerik.com/kendo-react-ui/components/intl/).

## Accessibility

Websites and applications are accessible when they enable users with disabilities to access their content through assistive technologies or keyboard navigation by providing them complete control over their features.

All KendoReact components are compliant with Section 508 and WAI-ARIA standards. For a complete list of [accessible KendoReact components](https://www.telerik.com/kendo-react-ui/components/accessibility/) and keyboard navigation support details, visit [KendoReact for support on accessibility](https://www.telerik.com/kendo-react-ui/components/accessibility/accessibility-compliance/).

**Standards and Policies**
Accessible websites and applications usually follow up with some or all of the following standards:

- [Section 508]([https://www.telerik.com/blogs/accessibility-regulations-you-need-to-follow-section-508](https://www.telerik.com/blogs/accessibility-regulations-you-need-to-follow-section-508))
- [Web Content Accessibility Guidelines [](https://www.telerik.com/kendo-react-ui/components/accessibility/#toc-web-content-accessibility-gudelines)(WCAG)]([https://www.telerik.com/blogs/the-wcag-accessibility-regulations-you-need-to-know](https://www.telerik.com/blogs/the-wcag-accessibility-regulations-you-need-to-know))

## Conclusion

[KendoReact](https://www.telerik.com/kendo-react-ui/?utm_medium=referral&utm_source=dev.to&utm_campaign=kendoreact-ui-library-reactjs-what-you-need-to-know) is an easy-to-use, scalable user interface library for React that helps developers quickly build their applications. I hope you enjoyed the post as much as I did writing it.