KendoReact 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 bundle, which also includes native UI component libraries for jQuery, Vue and Angular.
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 and Scheduler to Buttons and 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.
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 and React Button components, which we will be using for this demonstration.
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:
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.
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.
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, installed using the following command:
npm install --save @progress/kendo-theme-defaultBootstrap theme, installed using the following command:
npm install --save @progress/kendo-theme-bootstrapMaterial theme, 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, 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 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.
Globalization
Globalization is a process that combines the adaptation to specific cultures (internationalization) with their translation of component messages (localization).
In KendoReact, globalization is enabled through:
- The Internationalization package—Provides services for formatting and parsing of numbers and dates.
- The Localization 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.
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 and keyboard navigation support details, visit KendoReact for support on accessibility.
Standards and Policies
Accessible websites and applications usually follow up with some or all of the following standards:
- Section 508
- [Web Content Accessibility Guidelines (WCAG)](https://www.telerik.com/blogs/the-wcag-accessibility-regulations-you-need-to-know)
Conclusion
KendoReact 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.
Top comments (0)