DEV Community: Chinedu Imoh

How To Create a Contact Form in React With KendoReact Form

Chinedu Imoh — Mon, 16 May 2022 00:50:38 +0000

The KendoReact Form is a fast and small package for form state management built with React and designed with best practices in mind. In this article, we will be going over how to develop a contact form using this React Form component.

The gzipped and minified bundle of the React Form is 5 KB. The component integrates with all KendoReact components and is currently used by the built-in editor of the KendoReact Scheduler. For retrieving its field state, handling component events and rendering custom components, the React Form component uses the following components:

KendoReact Field component and FieldRenderProps interface
KendoReact FieldArray component and FieldArrayRenderProps interface

Also, when you have to create form layouts, the KendoReact Form library also provides the following components:

In this post, I will demonstrate how to use the KendoReact Form component to build a simple React contact form.

Prerequisites

To follow along with this tutorial, you will need to have:

React v16 or newer
A basic understanding of React
A code editor

React Project Setup

Those who are already familiar with scaffolding a React app using npx can skip ahead because next I will show how to get a React app off the ground for those who aren't.

You need to follow the steps below, and you will get your React app development server running on your local machine. Firstly, enter the following command into your preferred command line interface (CLI), then run the following boilerplate command listed below, provided by React, to help quickly set up a React project for development.

npx create-react-app task-organizer --use-npm
cd task-organizer
npm start

Locate the task-organizer project's directory and open it in your code editor. Now, you can begin by striping down the codes in the App.js file to look like this:

import "./App.css";

function App(){
    return <div classname="app"></div>
}
export default App;

Now that we are done scaffolding our React application, let's begin installing the dependencies for the application.

Dependency Installation

Next, let's add the KendoReact packages we'll be using for this project. I will use the KendoReact Default theme for this project, but other options exist—for example, the KendoReact Bootstrap and the KendoReact Material theme.

Install the KendoReact Default theme by running the following command in the terminal.

npm install --save @progress/kendo-theme-default

Integrating Multiple KendoReact Components

KendoReact is a rich suite of many modular components. In this demonstration, we will use multiple components imported from this React UI library to build the contact form. Below are the dependencies and peer dependencies; run the command to begin the installation.

npm install --save @progress/kendo-react-form @progress/kendo-react-inputs @progress/kendo-react-labels @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-react-intl

I am sure by now you will have noticed the @progress scope we’ve used. The KendoReact library provides many decoupled modules for different purposes; they all scope to @progress (Progress Telerik is the parent company behind KendoReact)—think of it as a global scope for the modules in KendoReact.

Note: KendoReact is a commercial UI component library, and as a part of this, you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or own a commercial license. For more information, you can head over to the KendoReact Licensing page.

Now that all the modules we need are installed, let's begin the development of the contact form.

The React Contact Form

Let's begin by importing all dependencies we will be needing; paste the following code into the App.js file.

import * as React from "react";
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { Error } from "@progress/kendo-react-labels";
import { Input, TextArea } from "@progress/kendo-react-inputs";
import "@progress/kendo-theme-default";

Above we imported the form, field, formElement from @progress/kendo-react-form, Error from @progress/kendo-react-labels, plus Input and TextArea from @progress/kendo-react-inputs. These are the components that will be used to develop the application. For the imported @progress/kendo-theme-default we added the default styling theme to our component.

Let's move on to writing the EmailInput functionality. Enter the following code below the imports in the App.js file:

const emailValidator = (value) =>
    emailRegex.test(value) ? "" : "Please enter a valid email.";
const EmailInput = (fieldRenderProps) => {
    const { validationMessage, visited, ...others } = fieldRenderProps;
    return (
    <div>
    <Input {...others} />
    {visited && validationMessage && <Error>{validationMessage}</Error>}
    </div>
    );
};

In the code above, we created emailValidator which stores a string that is a conditional set based on the output of emailRegex.test(value). The EmailInput function receives a fieldRenderProps argument and the validationMessage, visited and ...others objects are de-structured from the fieldRenderProps. The EmailInput function also returns a div that contains an input component that receives the remaining objects(..others) and conditional displays the Error Component with a validationMessage.

Now that we are done with that, let's create our App function, which we will render in the browser.

Under the EmailInput function, enter the following code below.

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
    <Form
    onSubmit={handleSubmit}
    render={(formRenderProps) => (
    <FormElement
        style={{
        maxWidth: 750,
        margin: "3em auto",
        }}
    >
        <fieldset className={"k-form-fieldset"}>
        <legend className={"k-form-legend"}>Contact Form</legend>
        <div style={{ margin: "1em 0" }}>
        <Field name={"firstName"} component={Input} label={"Email"} />
        </div>
        <div style={{ margin: "1em 0" }}>
        <Field
        name={"lastName"}
        component={EmailInput}
        validator={emailValidator}
        label={"First Name"}
        />
        </div>
        <div style={{ margin: "2em 0" }}>
        <Field
        name={"email"}
        type={"email"}
        component={TextArea}
        label={"Email"}
        />
        </div>
        </fieldset>
        <div className="k-form-buttons">
        <button
        type={"submit"}
        className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
        disabled={!formRenderProps.allowSubmit}
        >
        Submit
        </button>
        </div>
    </FormElement>
    )}
    />
    );
};
export default App;

First, we created a handleSubmit arrow function that receives dataItem as an argument and calls the alerts function with the JSON data containing dataItem, null and 2. But, you can replace this with the REST API you want to use. The App function also returns a Form that uses render props (mainly for cross-cutting concerns) to inject the FormElement as a prop dynamically.

In the FormElement component, there are three fields, which are wrapped by the fieldset. Each field takes in the following props: name, component, label and validator for the email field. The label prop labels the field, while the component props determine if the field is an input, textarea, etc. The name prop is attached to the field data when the form is submitted, then the validator is used by the email field to validate the email.

Here's the complete code of the App.js file.

import * as React from "react";
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { Error } from "@progress/kendo-react-labels";
import { Input, TextArea } from "@progress/kendo-react-inputs";
import "@progress/kendo-theme-default";
const emailRegex = new RegExp(/\S+@\S+\.\S+/);
const emailValidator = (value) =>
    emailRegex.test(value) ? "" : "Please enter a valid email.";
const EmailInput = (fieldRenderProps) => {
    const { validationMessage, visited, ...others } = fieldRenderProps;
    return (
    <div>
    <Input {...others} />
    {visited && validationMessage && <Error>{validationMessage}</Error>}
    </div>
    );
};
const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
    <Form
    onSubmit={handleSubmit}
    render={(formRenderProps) => (
    <FormElement
        style={{
        maxWidth: 750,
        margin: "3em auto",
        }}
    >
        <fieldset className={"k-form-fieldset"}>
        <legend className={"k-form-legend"}>Contact Form</legend>
        <div style={{ margin: "1em 0" }}>
        <Field name={"firstName"} component={Input} label={"Email"} />
        </div>
        <div style={{ margin: "1em 0" }}>
        <Field
        name={"lastName"}
        component={EmailInput}
        validator={emailValidator}
        label={"First Name"}
        />
        </div>
        <div style={{ margin: "2em 0" }}>
        <Field
        name={"email"}
        type={"email"}
        component={TextArea}
        label={"Email"}
        />
        </div>
        </fieldset>
        <div className="k-form-buttons">
        <button
        type={"submit"}
        className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
        disabled={!formRenderProps.allowSubmit}
        >
        Submit
        </button>
        </div>
    </FormElement>
    )}
    />
    );
};
export default App;

The image below shows a finished copy of the demo contact form project.

It’s good to mention that the KendoReact team has developed extensive Form Design Guidelines based on their long experience building UI components. The guidelines are freely available on their website, and you can reference it to learn more about how to build good-looking forms and UX best practices even if you’re not using the KendoReact Form itself.

Conclusion

In this post, we built a React contact form demo project with the React Form component provided by the KendoReact library. The KendoReact Form can be used to create any form—which can be effortlessly integrated into any existing project.

KendoReact UI Library for ReactJS: What You Need to Know

Chinedu Imoh — Fri, 29 Apr 2022 11:02:01 +0000

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-default
Bootstrap theme, installed using the following command:
npm install --save @progress/kendo-theme-bootstrap
Material 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.

Responsive Time-Tracking Dashboard With KendoReact

Chinedu Imoh — Tue, 19 Apr 2022 10:32:53 +0000

KendoReact is an excellent library for quickly creating a user interface with React. Still, the question is, how exactly does KendoReact help a developer? It helps save time when building powerful, polished and swift UI for apps. It also ensures consistency in the look and feel of the UI.

KendoReact is a React UI library that ships more than 100 ready-to-use components, ranging from complex ones such as a data grid, scheduler and rich text editor all the way to buttons and checkboxes. It also has features that go beyond that and improve designer-developer collaboration, for example, their Figma Design kits. In this post, we will be building a responsive time-tracking dashboard its rich React Layout Library.

Prerequisites

To follow along with this tutorial, you will need to have:

React v16 or newer
A basic understanding of React
A text editor

Getting Started

If you are already familiar with scaffolding a React app using npx, skip this part of the post, but for those who aren't, follow the steps below to get your React app development server running on your local machine. Enter the following command into your terminal to quickly set up a React project.

    npx create-react-app kendo-ui-demo --use-npm
    cd kendo-ui-demo
    npm start

If you use yarn, use the following command:

    yarn create react-app kendo-ui-demo
    cd kendo-ui-demo
    yarn start

Now let's begin by stripping down the code in the App.js file to look like this.

    Import "./App.css"

    function App () {
      return <div className="App"></div>;
    }

    export default App;

Next, let's add the KendoReact packages we'll be using for this project. I will use the KendoReact Default theme for this project, but others options exist—for example, the KendoReact Bootstrap and the KendoReact Material theme.

Note: KendoReact is a commercial UI component library, and as a part of this you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or by owning a commercial license. For more information, you can head over to the KendoReact Licensing page.

Let's install the KendoReact Default theme by running the following commands in your terminal.

    npm install --save @progress/kendo-theme-default

The --save command shown above indicates that this package should be a production dependency and not a development dependency; for dev dependency use --save-dev.

If you use yarn, use the following command:

    yarn add @progress/kendo-theme-default

In the above commands, you will notice @progress precedes the default theme; this means that KendoReact is distributed as multiple npm packages, scoped to @progress. Therefore we will see this a lot when installing other packages from KendoReact. Now, let's import the CSS file from the package in src/App.js.

Note: Add this import before your existing App.css import:

    import '@progress/kendo-theme-default/dist/all.css';

The KendoReact UI components are designed so that they are not tightly coupled to a specific theme. You might be thinking, why do you need to include one of these three themes or your custom theme? Well, this allows you to change the look and feel of the application by modifying a Sass or CSS file or even swapping themes for your entire application by changing a single import.

If needed, any additional custom styles can go in the empty src/App.css file.

Integrating Multiple KendoReact Components

KendoReact is a rich suite of many modular components. As mentioned earlier, in this demonstration, we will use multiple components imported from KendoReact to build a responsive time-tracking dashboard application. Before we begin, let’s install and import the React LayoutLibrary package and its dependencies.

    npm install --save @progress/kendo-react-layout @progress/kendo-react-progressbars @progress/kendo-licensing @progress/kendo-react-intl

With that done, it's time to import the package into the project. Add the following code in the App.js file:

    import { Card, GridLayout, GridLayoutItem } from "@progress/kendo-react-layout";

The image below shows a finished copy of the project demo we will be building.

Let's start by creating a data.json file in the src folder and populate it with the static data we will be using for this demo; this eliminates the need for a server or an external API.

    touch data.json

    [
     {
      "id": 1,
      "on": "Work",
      "time": "32hrs",
      "lastWeek": "36hrs",
      "layoutColor": "hsl(15, 100%, 70%)",
      "row": "1",
      "col": "2"
     },
     {
      "id": 2,
      "on": "Play",
      "time": "10hrs",
      "lastWeek": "8hrs",
      "layoutColor": "hsl(195, 74%, 62%)",
      "row": "1",
      "col": "3"
     },
     {
      "id": 3,
      "on": "Study",
      "time": "4hrs",
      "lastWeek": "7hrs",
      "layoutColor": "hsl(348, 100%, 68%)",
      "row": "1",
      "col": "4"
     },
     {
      "id": 4,
      "on": "Exercise",
      "time": "4hrs",
      "lastWeek": "5hrs",
      "layoutColor": "hsl(145, 58%, 55%)",
      "row": "2",
      "col": "2"
     },
     {
      "id": 5,
      "on": "Social",
      "time": "5hrs",
      "lastWeek": "10hrs",
      "layoutColor": "hsl(264, 64%, 52%)",
      "row": "2",
      "col": "3"
     },
     {
      "id": 6,
      "on": "Self Care",
      "time": "2hrs",
      "lastWeek": "2hrs",
      "layoutColor": "hsl(43, 84%, 65%)",
      "row": "2",
      "col": "4"
     }
    ]

Now, let's import the data into the App.js file using the following command below:

    import Data from "./data.json";

Now that we are done creating and importing our data.json file, let’s start development.

In the App.js file, let’s create a function App and use it as our default export. After you’ve done that, you should have something that looks like this in your code editor.

    import { Card, GridLayout, GridLayoutItem } from "@progress/kendo-react-layout";
    import Data from "./data.json";
    import "@progress/kendo-theme-default/dist/all.css";
    import "./App.css";

    function App(){
    ...
    };
    export default App;

Now, paste the following code into the function App.

     let paddingScreen = 20;
     if (window.innerWidth < 600) {
      let col = 0;
      let row = 3;
      paddingScreen = 5;
      Data.map((item) => {
       if (col > 1) {
        col = 1;
        row = row + 1;
       } else {
        col = col + 1;
       }
       item.col = col;
       item.row = row;
      });
     }
     return (
      <div
       style={{
        height: "100%",
        width: "100%",
        paddingBottom: "3em",
        backgroundColor: "hsl(226, 43%, 10%)",
       }}
      >
       <GridLayout
        gap={{
         rows: 175,
         cols: 30,
        }}
        rows={[
         {
          height: 50,
         },
         {
          height: 50,
         },
         {
          height: 50,
         },
         {
          height: 50,
         },
        ]}
        cols={[
         {
          width: 200,
         },
         {
          width: 200,
         },
         {
          width: 200,
         },
         {
          width: 200,
         },
        ]}
        style={{ padding: `10% 0 0 ${paddingScreen}%` }}
       >
        <GridLayoutItem
         row={1}
         col={1}
         rowSpan={2}
         style={{ marginBottom: "20em" }}
        >
         <Card style={{ backgroundColor: "rgba(0,0,0,0)", border: "none" }}>
          <div
           style={{
            backgroundColor: "hsl(235, 46%, 20%)",
            borderRadius: 10,
           }}
          >
           <div
            style={{
             borderRadius: 10,
             padding: "1em 1em 3em 1.7em",
             backgroundColor: "hsl(246, 80%, 60%)",
            }}
           >
            <img
             src={`${process.env.PUBLIC_URL}/WhatsApp Image 2021-10-31 at 12.18.47 AM.jpeg`}
             style={{
              width: 65,
              height: 65,
              objectFit: "cover",
              borderRadius: 60,
              border: "2px solid white",
             }}
            />
            <p style={{ color: "white", marginBottom: "-1.3em" }}>
             Report for
            </p>
            <h1
             style={{
              color: "white",
              fontSize: "2rem",
              fontWeight: 400,
             }}
            >
             Fatima Usman
            </h1>
           </div>
           <div className="dwm">
            <p>Daily</p>
            <p>Weekly</p>
            <p>Monthly</p>
           </div>
          </div>
         </Card>
        </GridLayoutItem>
        {Data.map((item) => {
         const { id, on, time, lastWeek, layoutColor, row, col } = item;
         return (
          <GridLayoutItem row={row} col={col} colSpan={1} rowSpan={1} id={id}>
           <Card
            style={{
             border: "none",
             borderRadius: 10,
             backgroundColor: "rgba(0,0,0,0)",
            }}
           >
            <div
             style={{
              backgroundColor: layoutColor,
              height: 50,
              borderRadius: 0,
             }}
            ></div>
            <div className="ttc">
             <p>{on}</p>
             <h1>{time}</h1>
             <p>Last Week - {lastWeek}</p>
            </div>
           </Card>
          </GridLayoutItem>
         );
        })}
       </GridLayout>
      </div>
     );

The React GridLayout component imported from @progress/kendo-react-layout acts as a wrapper for GridLayoutItem, while GridLayoutItem is a container for the data we wish to display. Here's a visual aid to help you understand that statement.

In the code above, you will see gap, rows and cols passed in as props in the GridLayout. The GridLayout defines the number of rows and cols that will span across that entire section. The gap prop defines the gap between the rows and col. Therefore, the GridLayout defines the grid system while GridLayoutItem follows this grid system in allocating the number for its row, col, rowspan and colspan for each item. (rowspan and colspan define how many rows and cols a particular GridLayoutItem should occupy.)

The React Card component acts as a div wrapper for our items in the cards. There's nothing unusual about the Card component, but I think it is still nice because sometimes you won't have to make as much style alteration as I did, depending on your UI design.

You must have noticed we also passed style props to the components provided by Kendo UI. Although KendoReact comes with a set of predefined styles, we can also alter these components as we see fit. KendoReact allows both style props and className props, so you can use inline styles or external stylesheet or both, depending on your personal preference.

Now, empty the App.css file in the src directory, then copy and paste the following style:

    .dwm {
     margin-top: 1.5em;
    }
    .dwm p {
     cursor: pointer;
     margin-left: 1em;
     width: fit-content;
     color: hsl(235, 45%, 61%);
    }
    .dwm p:hover {
     color: hsl(236, 100%, 87%);
    }
    .ttc {
     background-color: hsl(235, 46%, 20%);
     color: white;
     margin-top: -1.2em;
     padding-left: 1em;
     border-radius: 10px;
    }
    .ttc h1 {
     font-size: 3rem;
     font-weight: 400;
     margin-bottom: -0.2em;
    }
    .ttc :first-child {
     margin-bottom: -2em;
    }

In the code above, the styles are to create a pleasant and modern UI for the project. Thanks to KendoReact, we are not restricted to only their predefined styles.

The GridLayout takes items in the prop gap as an object, while the prop rows and cols take items as an array. Also, each item in the array represents a single row or col. If, for instance, you pass in an array like this:

    cols={[
      {
       width: 200,
      },
      {
       width: 200,
      },
      {
       width: 200,
      },
      {
       width: 200,
      },
    ]}

Each item in the array represents each col passed into the GridLayoutItem, so column one is the array's first index, while column two is the second index of the array, so on and so forth, be it width or height.

Finally, you will notice a conditional logic at the top section of the function App.

    if (window.innerWidth < 600) {
      let col = 0;
      let row = 3;
      paddingScreen = 5;
      Data.map((item) => {
       if (col > 1) {
        col = 1;
        row = row + 1;
       } else {
        col = col + 1;
       }
       item.col = col;
       item.row = row;
      });
    }

This logic helps us alter how the grid system is rendered depending on your screen width, similar to media queries in CSS. In this case, we are performing all the logic in App.js because that is the only way we could alter the cols and rows of each GridLayoutItem.

So all we did was adjust the col and row data in the data.json file, which altered the GridLayoutItem to fit the screen width. After following all the steps, you should have the same result as the image below.

Kindly reload the page to see layout changes after resizing the screen width for both the desktop and mobile view. Still, for those who want dynamic responsiveness like that of media queries, you could use the addEventListener for windows resizing then run that logic from the callback passed into the event listener.

Conclusion

In the demo, we imported all the components from just one module. Still, when using KendoReact for a larger project, you can use as many modules as you like and import as many components as you wish from whichever modules you want with zero restrictions. Here's an example.

    npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-data-tools @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-treeview

Next, import it into your project like this:

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

You can find what their plans are on the KendoReact pricing page. Also, all KendoReact licenses come with customer support aiding a better developer experience.

Create a React Chat Application Using KendoReact Conversational UI

Chinedu Imoh — Fri, 01 Apr 2022 18:17:29 +0000

The KendoReact Conversational UI creates a connection that closes the gap between the web and the next-gen natural language processing applications. It also provides a React Chat component that allows end users to participate in chat sessions with other chatbots or users. It provides a wide range of features, from integration with Chatbot services, data binding and customization, to globalization and suggested actions. That isn’t all—we will go over the key features that make this an ideal component for adding chat functionality into your React application.

Key Features of KendoReact Conversational UI

Integration With Chatbot Services
The Chat component provides a means of integrating and connecting chatbots. Visit the KendoReact documentation for a code example on the integration of the React Chat component with a sample DialogFlow Agent or an Azure Bot Service.

Data Binding
This React Conversational UI Component provides a data model, which allows you to bind the list of messages from a remote streaming service. You can read more on the data binding options of the Chat component in the docs.

Suggested Actions
You can use the built-in action types to configure the Chat to display the suggested actions of the last messages, which prevents chat users from losing valuable time when responding to the messages. Find more on the implementation details of the suggested actions here.

Using KendoReact Conversational UI in a React App

Let's demonstrate how to use this React Chat component by building a simple chat website.

Prerequisites
To follow along with this tutorial, you will need to have:

A basic knowledge of ReactJS
A text editor

Setting Up the React Project

Those who are already familiar with scaffolding a React app using npx can skip ahead, because next I will show how to get a React app off the ground. All you need to do is follow the steps below, and you will get your React app development server running on your local machine.

Run the following boilerplate command listed below, to quickly set up a React project for development.

npx create-react-app chat-web --use-npm
cd chat-web
npm start

And those who use yarn can use the following commands:

    yarn create react-app chat-web
    cd chat-web
    yarn start

Locate the chat web project's directory and open it in your code editor. Now you can begin by striping down the codes in the App.js file to look like this.

import "./App.css";

function App(){
    return <div classname="app"></div>
}
export default App;

Now that we are done scaffolding our React application, let's begin installing the dependencies for the application.

Dependency Installation
Next, let's add the KendoReact packages we'll be using for this project. I will use the KendoReact Default theme for this project, but other options exist—for example, the KendoReact Bootstrap and the KendoReact Material themes.

Note: KendoReact is a commercial UI component library, and as a part of this you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or by owning a commercial license. For more information, you can head over to the KendoReact Licensing page.

Enter the following command into your CLI (command line interface) and run the command.

npm install --save @progress/kendo-theme-default @progress/kendo-react-conversational-ui @progress/kendo-react-buttons @progress/kendo-licensing @progress/kendo-react-intl

The command above installs the KendoReact Default theme, which will set the default CSS style of the React Chat component.

We also installed @progress/kendo-react-conversational-ui, where we will import the Chat component for the website and all its peer dependencies.

I am sure by now you will have noticed the @progress scope we’ve used. The KendoReact library provides many decoupled modules for different purposes; they all scope to @progress (Progress is the parent company behind KendoReact)—think of it as a global scope for the modules in KendoReact.

Now that all the modules we need are installed, let's start developing the chat application.

The React Chat Application

Firstly, paste the following code into the App.js file.

import * as React from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";
import "@progress/kendo-theme-default/dist/all.css";

const user = {
    id: 1,
    avatarUrl: "https://via.placeholder.com/24/008000/008000.png",
};
const bot = {
    id: 0,
};
const initialMessages = [
    {
    author: bot,
    suggestedActions: [
    {
    type: "reply",
    value: "Neat!",
    },
    ],
    timestamp: new Date(),
    text: "Hello, this is a demo bot. I don't do much, but I can count symbols!",
    },
];
const App = () => {
    const [messages, setMessages] = React.useState(initialMessages);
    const addNewMessage = (event) => {
    let botResponse = Object.assign({}, event.message);
    botResponse.text = countReplayLength(event.message.text);
    botResponse.author = bot;
    setMessages([...messages, event.message]);
    setTimeout(() => {
    setMessages((oldMessages) => [...oldMessages, botResponse]);
    }, 1000);
    };
    const countReplayLength = (question) => {
    let length = question.length;
    let answer = question + " contains exactly " + length + " symbols.";
    return answer;
    };
    return (
    <Chat
    user={user}
    messages={messages}
    onMessageSend={addNewMessage}
    placeholder={"Type a message..."}
    width={400}
    />
    );
};

Let's break the code into smaller chunks and explain them bit by bit for better understanding.

import * as React from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";
import "@progress/kendo-theme-default/dist/all.css";

Above we imported react, and we will be using some of its React features, i.e., useState. Chat is imported from @progress/kendo-react-conversational-ui and @progress/kendo-theme-default/dist/all.css, which provides the style we need to make our Chat components elegant.

const user = {
    id: 1,
    avatarUrl: "https://via.placeholder.com/24/008000/008000.png",
};
const bot = {
    id: 0,
};
const initialMessages = [
    {
    author: bot,
    suggestedActions: [
    {
    type: "reply",
    value: "Neat!",
    },
    ],
    timestamp: new Date(),
    text: "Hello, this is a demo bot. I don't do much, but I can count symbols!",
    },
];

In the above code section, we first created the user object, which contains the id and avatarUrl (user image). These two properties can be modified however you want or based on the needs of our application.

Next, we created the bot object with an id property, but the bot could have an avatarUrl if required. The initialMessages contain array objects, which are the message(s) you want the user to see upon starting the chat session.

const App = () => {
    const [messages, setMessages] = React.useState(initialMessages);
    const addNewMessage = (event) => {
    let botResponse = Object.assign({}, event.message);
    botResponse.text = countReplayLength(event.message.text);
    botResponse.author = bot;
    setMessages([...messages, event.message]);
    setTimeout(() => {
    setMessages((oldMessages) => [...oldMessages, botResponse]);
    }, 1000);
    };
    const countReplayLength = (question) => {
    let length = question.length;
    let answer = question + " contains exactly " + length + " symbols.";
    return answer;
    };
    return (
    <Chat
    user={user}
    messages={messages}
    onMessageSend={addNewMessage}
    placeholder={"Type a message..."}
    width={400}
    />
    );
};

Finally, in our App function, we used the useState hook to mutate the messages, which is passed as props in the Chat component. Also, we created an addNewMessage function, which is called whenever we send a message.

In the addNewMessage function implementation, we first mutated the properties text and author of botResponse. We passed an array into setMessages, where we used the spread operator syntax to copy all the messages and add the event.message.

We also implemented the setTimeout function, which calls the setMessages function; then, the previous state is copied into an array using the spread operator syntax and adds the botResponse. The countReplyLength just returns the length of the sent message.

The image below shows the chat application with the initial response.

The following image below shows the chat application after interacting with the chatbot.

Conclusion

In this post, we covered an introduction to the KendoReact C Conversational UI. Still, for a production application, you would replace the bot response with the response of either a Google chatbot or a Microsoft chatbot.

This implementation is similar to an end-to-end user chat application. Note that KendoReact has to be licensed before you can use your application for commercial purposes, as it is not free for commercial purposes.

Building an NFT Preview Card With KendoReact

Chinedu Imoh — Wed, 16 Mar 2022 18:31:01 +0000

Kendo UI is a UI library built by Progress Telerik to develop user interfaces for small and enterprise-level applications. Kendo UI is available for the following JavaScript frameworks: React, Angular, Vue, and jQuery.

KendoReact is a React component library that makes designing and building powerful apps much faster. It includes fantastic features that help build a fast and sleek user interface, ensuring the UI has a modern feel and look to it. KendoReact is also prepared to handle any new requirements easily, which could create a perfect sync with your designer to avoid unnecessary iterations during the development cycle.

With that being said, In this post, I will demonstrate how to use the KendoReact library to build an NFT preview card for your React application.

Prerequisites

To follow along with this tutorial, you will need to have:

React v16 or newer
A basic understanding of React
A code editor

React Project Setup

Those who are already familiar with scaffolding a React app using npx can skip ahead, but I will show how to get a React app off the ground for those who aren't. All you just need to do is follow along, and you will get the React app development server running on your local machine.

Enter the following command into your preferred CLI (command line interface), then run the following boilerplate command listed below, provided by React, to help us quickly set up a React project for development.

npx create-react-app NFT-demo --use-npm
cd my-app
npm start

And those who use Yarn can run the following commands.

yarn create react-app NFT-demo
cd my-app
yarn start

Now, locate the NFT-demo project's directory and open it in your code editor. You can begin by striping down the codes in the App.js file to look like this.

    import "./App.css";

    function App(){
     return <div classname="app"></div>
    }
    export default App;

Now that we are done scaffolding our React application, let's begin installing the dependencies for the application.

Dependency Installation

Install the KendoReact Default theme by running the following command in the terminal.

npm install --save @progress/kendo-theme-default

Now that we've installed the theme, let's import the theme CSS file into the project. Add the following code into the App.js file.

import "@progress/kendo-theme-default/dist/all.css";

The imported file adds the theme style to our application. Let's move on to installing the KendoReact layout module we will be using to develop the application.

Integrating Multiple KendoReact Components

KendoReact is a rich suite of many modular components. As mentioned earlier, in this demonstration, we will use multiple components imported from KendoReact to build the NFT preview card. Before we begin, let’s install and import the React Layout Library package and its dependencies.

    npm install --save @progress/kendo-react-layout @progress/kendo-react-progressbars @progress/kendo-licensing @progress/kendo-react-intl

I am sure by now you will have noticed the @progress scope we’ve used. The KendoReact library provides many decoupled modules for different purposes; they all scope to @progress (Progress is the parent company behind KendoReact)—think of it as a global scope for the modules in KendoReact.

Now that all the modules we need are installed, let's start developing the card.

The NFT Preview Card

The image below shows a finished copy of the project demo we will be building.

Let's start with importing the package into the project. Add the following code to the top of the App.js file.

import {
    Card,
    CardBody,
    CardImage,
    CardSubtitle,
} from "@progress/kendo-react-layout";

We imported the Card, CardBody, CardImage and CardSubtitle; these are UI components available to the layout modules. But this isn’t all KendoReact offers. KendoReact has more than 100 components available in different npm packages, all scoped to @progress.

The App.css file will contain all the aesthetic code. Empty the file and add the following code:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

The code above prevents the browser from adding automatic padding and margin, and the box-sizing deals with the possible padding issue we may incur.

Let's add this code into the return section of the App function located in our App.js file.

return (
    <div
    style={{
    backgroundColor: "#0D1A2D",
    height: "100vh",
    padding: "150px 650px 0px 650px",
    }}
    >
    <Card
    style={{
        backgroundColor: "#14263E",
        boxShadow: "0px 0px 25px rgba(0,0,0,0.2)",
        width: "240px",
        borderRadius: "7px",
    }}
    >
    <div style={{ margin: "20px auto" }}>
        <CardImage
        src={`${process.env.PUBLIC_URL}image-equilibrium.jpg`}
        style={{
        width: "200px",
        height: "200px",
        backgroundColor: "rgba(0,0,0,0.0)",
        borderRadius: "7px",
        }}
        />
        <CardBody style={{ padding: "0", margin: "10px 0px" }}>
        <p style={{ color: "white", fontWeight: "bold" }}>
        Equilibrum #3429
        </p>
        <p
        style={{
        color: "#455B78",
        width: "200px",
        fontWeight: "bold",
        }}
        >
        Our Equilibrum collection promotes balance and calm
        </p>
        <p
        style={{
        color: "#0F5F74",
        width: "200px",
        fontWeight: "bold",
        }}
        >
        0.034 ETH
        </p>
        </CardBody>
        <CardSubtitle
        style={{ borderTop: "1px solid #203A56", paddingTop: "10px" }}
        >
        <p style={{ position: "relative" }}>
        <img
        src={`${process.env.PUBLIC_URL}WhatsApp Image 2021-10-31 at 12.18.47 AM.jpeg`}
        alt=""
        style={{
            width: "40px",
            height: "40px",
            objectFit: "cover",
            borderRadius: "20px",
        }}
        />{" "}
        <span
        style={{
            position: "absolute",
            top: "13px",
            left: "50px",
            fontWeight: "bold",
            color: "white",
        }}
        >
        <span style={{ color: "#455B78" }}> Creation of</span> John Doe
        </span>
        </p>
        </CardSubtitle>
    </div>
    </Card>
    </div>
    );

Now that we have the code, let's begin by examining each component to understand the code in depth. First, we passed CardBody, CardImage and CardSubtitle as special props known as props.children (passed in as an array structure) into the Card component. Bypassing props.children, KendoReact can traverse every nested data and render them appropriately.

Let's analyze these card parts: CardBody, CardImage, CardSubtitle.

<CardImage
src={`${process.env.PUBLIC_URL}image-equilibrium.jpg`}
style={{
width: "200px",
height: "200px",
backgroundColor: "rgba(0,0,0,0.0)",
borderRadius: "7px",
}}
/>

As shown in the code and image above, the CardImage component is where we inserted the link to the image file; we used ${process.env.PUBLIC_URL}image-equilibrium.jpg to point to our public directory where we kept the image file. We also passed the style props to help us customize the CardImage component to how we see fit, which is one of the remarkable qualities of KendoReact.

<CardBody style={{ padding: "0", margin: "10px 0px" }}>
<p style={{ color: "white", fontWeight: "bold" }}>
Equilibrum #3429
</p>
<p
style={{
color: "#455B78",
width: "200px",
fontWeight: "bold",
}}
>
Our Equilibrum collection promotes balance and calm
</p>
<p
style={{
color: "#0F5F74",
width: "200px",
fontWeight: "bold",
}}
>
0.034 ETH
</p>
</CardBody>

In the CardBody component, we passed the data we wanted to display in p tag because we can pass any kind of tag we want in KendoReact components that are containers (have other components or JSX composed in them).

<CardSubtitle
style={{ borderTop: "1px solid #203A56", paddingTop: "10px" }}
>
<p style={{ position: "relative" }}>
<img
src={`${process.env.PUBLIC_URL}WhatsApp Image 2021-10-31 at 12.18.47 AM.jpeg`}
alt=""
style={{
    width: "40px",
    height: "40px",
    objectFit: "cover",
    borderRadius: "20px",
}}
/>{" "}
<span
style={{
    position: "absolute",
    top: "13px",
    left: "50px",
    fontWeight: "bold",
    color: "white",
}}
>
<span style={{ color: "#455B78" }}> Creation of</span> John Doe
</span>
</p>
</CardSubtitle>

Finally, in the CardSubtitle component, we passed both an IMG and a p tag because, like we said earlier, wrapper container components like CardBody and CardSubtitle can receive other components or JSX elements in them.

Conclusion

In the article, we showed only one of the capabilities of KendoReact using the Card component, which we used in defining our UI. Still, KendoReact has other components for Grid systems, buttons, animations, etc. And all this comes in place to help us quickly develop a full-fledged application.

Please note that KendoReact has to be licensed before you can use your application for commercial purposes, as it is not free for commercial purposes.

React Animation With KendoReact

Chinedu Imoh — Tue, 01 Mar 2022 09:46:26 +0000

Web animations introduced attractive and exciting UI, but creating robust animations in software has been a hassle. There are many difficulties while scaling the application, so developers have created several reusable libraries overtime to handle these difficulties.

This article will be focusing on one of those libraries—KendoReact and its React Animation component. In KendoReact, the TransitionGroup component helps users animate elements that appear, enter or exit the viewport.

The KendoReact library includes the KendoReact Animation component in its robust suite of more than 100 customizable and fully accessible React UI components. It is distributed through npm under the kendo-react-animation package.

Prerequisites

To follow along with this tutorial, you will need to have:

A basic knowledge of ReactJS
Node.js installed
A code editor

Installation and Setup

Firstly, we need to use the following command to create a project, move into the project directory and start the project. Enter the command below in your terminal:

npx create-react-app kendo-ui-animations --use-npm
cd kendo-ui-animations
npm start

Next, install the KendoReact library needed for the project with the following command.

npm install --save @progress/kendo-react-animation

Configuring the React Animation Component

The ReactTransitionGroup performs CSS transitions and animations when a React component enters or exits the DOM. All components wrapped by the animation will be animated with every child element enclosed in the AnimationChild component. The AnimationChild component implements the required special life-cycle hooks, and each child component is wrapped in an additional div element.

The TransitionGroup component automatically detects the enter and exit state of the children. This means that you only need to add or remove a child to animate a child.

The following example below shows how to animate the element content added to the Slide Animation with an entering effect. When content is removed, the element gains a unique animation effect.

For the aesthetic of our UI, let's create a style.css file in the src directory and paste the following code into the file.

.content {
    width: 100px;
    padding: 10px;
    color: #787878;
    background-color: #fcf7f8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.05);
}

The CSS code above is used to style the content we will create shortly.

In your project directory, you will see the App.js file in the src directory; replace the file's content with the code below.

import {useState} from "react";
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(true);

    const onClick = () => {
    setShow((state)=>{
    !state
    });
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div>
    <dl>
    <dt>Animate:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Slide>{children}</Slide>
    </div>
    );
};

We imported Slide from KendoReact and state from React in the code above. We then called state in App.js and set its initial value to be true (meaning the element content will be visible on initial rendering). We created the variable children and assigned a value to it based on the present state of the show value using the ternary operator.

So whenever we click on the button tag, the onClick function is called and it changes the state of show. But here we are passing a callback into setShow because the next state value is dependent on the previous state value of show.

Types of Animation

The contents in the Animation component are animated using various animation effects. The Animation package contains the following types of animations:

Fade
Expand
Push
Reveal
Slide
Zoom

To use these different animations, go back into your App.js file and replace every part of your code that contains Slide to whichever animation you want to use; below is an example using Fade.

import {useState} from "react";
import { Fade } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(true);

    const onClick = () => {
    setShow((state)=>{
    !state
    });
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div>
    <dl>
    <dt>Animate:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Fade>{children}</Fade>
    </div>
    );
};

Disabled Animations

You can also disable or enable (hide or show) the effect of the animations. The control over the disabled animation state results in its disappearance or an instant element display.

The Expand, Push, Reveal, Slide and Zoom animations apply the hiding or showing effect by default. To disable these effects, set the exit or the enter property, respectively, to false.

Now adjust or replace the code in the App.js file to fit the code below.

import {useState} from "react";
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(false);
    const [enter, setEnter] = useState(true);
    const [exit, setExit] = useState(true);

    const onClick = () => {
    setShow(!show);
    };

    const onChange = (e) => {
    if (e.target.name === "enter") {
    setEnter(e.target.checked);
    } else {
    setExit(e.target.checked);
    }
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div>
    <dl>
    <dt>
        <dl>
        <input
        type="checkbox"
        id="enter"
        className="k-checkbox"
        name="enter"
        checked={enter}
        onChange={onChange}
        />
        <label htmlFor="enter" className="k-checkbox-label">
        Enter:&nbsp;
        </label>
        <br />
        <input
        type="checkbox"
        id="exit"
        className="k-checkbox"
        name="exit"
        checked={exit}
        onChange={onChange}
        />
        <label htmlFor="exit" className="k-checkbox-label">
        Exit:&nbsp;
        </label>
        </dl>
    </dt>
    <dt>Animate:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Slide enter={enter} exit={exit}>
    {children}
    </Slide>
    </div>
    );
};

The props enter and exit are passed into the animation component (Slide) to enable the entering and exiting animation in the code above; this is because the value of enter and exit are set to true initially.

We also added an onChange function; the function is called by checking or unchecking the input tag, which allowed the enabling or disabling of the entering or exiting animation.

Stacked Animations

All animation is an extension of the Animation component. However, animations like the Push and Zoom are further extended by using the stackChildren options, which enable you to stack animations.

Exiting and Entering Child Elements
To stack exiting and entering child elements within the same block container, set the stackChildren property to true. When it comes to replacing an existing child element with a new one, the stack effect is most suitable.

Now adjust or replace the code in the App.js file to fit the code below.

import {useState}from "react";
import { Zoom } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [index, setIndex] = useState(1);

    const onClick = () => {
    setIndex(index + 1);
    };

    return (
    <div>
    <dl>
    <dt>Zoom:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Zoom stackChildren={true}>
    <div className="content" key={index}>
        {index}
    </div>
    </Zoom>
    </div>
    );
};

In the codes above, we imported our animation components as usual. But, this time we passed nested JSX, which is in contrast to the previous animation where we passed only a single JSX. In order for this to work, we had to pass the stackChildren props with the value true.

Life-Cycle Hooks

When a child element is declared, you are either removing or adding a child. All animations call specific hooks during the entering or exiting of the element.

Adding Child Elements
Each time you add a component to an entering animation, the animations call the following hooks:

onEnter—Called before the animation starts.
onEntering—Called after the animation has started.
onEntered—Called when the animation completes.

Removing Child Elements
The animations call the following hook below each time you remove a component from an existing animation:

onExit—Called before the animation starts.
onExiting—Called after the animation started.
onExited—Called when the animation completes.

Duration

All animation types allow you to take control of the duration of the exiting and entering animation effects.

When configuring the duration, make sure to define the transitionExitDuration or transitionEnterDuration property. The duration is represented by the passed value of the animation in milliseconds.

For example, adjust or replace the code in the App.js file to fit the code below.

import {useState} from "react";
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(false);

    const onClick = () => {
    setShow(!show);
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div>
    <dl>
    <dt>Animate:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Slide transitionEnterDuration={800} transitionExitDuration={1000}>
    {children}
    </Slide>
    </div>
    );
};

In the code above, we made an adjustment to import the Slide from KendoReact Animation. Also we passed the transitionEnterDuration and transitionExitDuration props to specify the animation duration for entering and exiting.

Direction

Except for the Fade Animation, the Animations provide a set of predefined directions, which allow us to control their exiting and entering effects.

Note: A configurable direction feature isn't available for the Fade Animation because it represents a transition in the element's opacity.

The entering and exiting animations can be defined by using the direction property of each Animation type listed below:

ExpandDirection
PushDirection
RevealDirection
SlideDirection
ZoomDirection

Expand
The following predefined directions are supported by the Expand Animation:

Vertical (Default): The content is expanded from center to top and bottom, and vice versa.
Horizontal: The content is expanded from center to left and right, and vice versa.

Now adjust or replace the code in the App.js file with the code below.

import { useState } from "react"
import { Expand } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(false);
    const [direction, setDirection] = useState("vertical");

    const onClick = () => {
    setShow(!show);
    };

    const onChange = (e) => {
    setDirection(e.target.value);
    };

    const children = show ? <div className="content">Content</div> : null;
    return (
    <div className="row">
    <div className="col-md-6">
    <dl>
        <dt>Expand: {direction}</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>
    <Expand direction={direction}>{children}</Expand>
    </div>
    <div className="col-md-6">
    <dl>
        <dt>Direction:</dt>
        <dd>
        <div className="example-config">
        <input
        id="ver"
        className="k-radio"
        type="radio"
        name="direction"
        value="vertical"
        defaultChecked={direction === "vertical"}
        onClick={onChange}
        />
        <label htmlFor="ver" className="k-radio-label">
        &nbsp;Vertical
        </label>
        <br />
        <input
        id="hor"
        className="k-radio"
        type="radio"
        name="direction"
        value="horizontal"
        defaultChecked={direction === "horizontal"}
        onClick={onChange}
        />
        <label htmlFor="hor" className="k-radio-label">
        &nbsp;Horizontal
        </label>
        </div>
        </dd>
    </dl>
    </div>
    </div>
    );
};

In the code above, we called the setDirection function; the value of setDirection determines the value of the prop Direction passed into the Expand component imported from KendoReact animations. The GIF below shows the result.

Push
The following predefined directions are supported by the Push Animation:

Right (Default)—The content is pushed from left to right.
Up—The content is pushed from bottom to top.
Down—The content is pushed from top to bottom.
Left—The content is moved from right to left.

Now adjust or replace the code in the App.js file to fit the code below.

import { useState } from "react"
import { Push } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [direction, setDirection] = useState("right");
    const [index, setIndex] = useState(1);

    const onClick = () => {
    setIndex(index + 1);
    };

    const onChange = (e) => {
    setDirection(e.target.value);
    };

    return (
    <div className="row">
    <div className="col-md-6">
    <dl>
        <dt>Push: {direction}</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>

    <Push direction={direction} stackChildren={true}>
        <div className="content" key={index}>
        {index}
        </div>
    </Push>
    </div>
    <div className="col-md-6">
    <dl>
        <dt>Direction:</dt>
        <dd>
        <div className="example-config">
        <input
        id="up"
        className="k-radio"
        type="radio"
        name="direction"
        value="up"
        defaultChecked={direction === "up"}
        onClick={onChange}
        />
        <label htmlFor="up" className="k-radio-label">
        &nbsp;Up
        </label>
        <br />
        <input
        id="down"
        className="k-radio"
        type="radio"
        name="direction"
        value="down"
        defaultChecked={direction === "down"}
        onClick={onChange}
        />
        <label htmlFor="down" className="k-radio-label">
        &nbsp;Down
        </label>
        <br />
        <input
        id="left"
        className="k-radio"
        type="radio"
        name="direction"
        value="left"
        defaultChecked={direction === "left"}
        onClick={onChange}
        />
        <label htmlFor="left" className="k-radio-label">
        &nbsp;Left
        </label>
        <br />
        <input
        id="right"
        className="k-radio"
        type="radio"
        name="direction"
        value="right"
        defaultChecked={direction === "right"}
        onClick={onChange}
        />
        <label htmlFor="right" className="k-radio-label">
        &nbsp;Right
        </label>
        </div>
        </dd>
    </dl>
    </div>
    </div>
    );
};

In the code above, we followed the same syntax as Expand, but the process is done with the Push component this time. Also, we included the stackChildren. The GIF below shows the result.

Reveal
The following predefined directions are supported by the Reveal Animation:

Vertical (Default)—The content of the height is revealed.
Horizontal—The content of the width is displayed.

Now adjust or replace the code in the App.js file to fit the code below.

import { useState } from "react"
import { Reveal } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [direction, setDirection] = useState("vertical");
    const [index, setIndex] = useState(1);

    const onClick = () => {
    setIndex(index + 1);
    };

    const onChange = (e) => {
    setDirection(e.target.value);
    };

    return (
    <div className="row">
    <div className="col-md-6">
    <dl>
        <dt>Reveal: {direction}</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>
    <Reveal direction={direction}>{index}</Reveal>
    </div>
    <div className="col-md-6">
    <dl>
        <dt>Direction:</dt>
        <dd>
        <div className="example-config">
        <input
        id="ver"
        className="k-radio"
        type="radio"
        name="direction"
        value="vertical"
        defaultChecked={direction === "vertical"}
        onClick={onChange}
        />
        <label htmlFor="ver" className="k-radio-label">
        &nbsp;Vertical
        </label>
        <br />
        <input
        id="hor"
        className="k-radio"
        type="radio"
        name="direction"
        value="horizontal"
        defaultChecked={direction === "horizontal"}
        onClick={onChange}
        />
        <label htmlFor="hor" className="k-radio-label">
        &nbsp;Horizontal
        </label>
        </div>
        </dd>
    </dl>
    </div>
    </div>
    );
};

Once again, in the code above, we followed the same syntax as Expand, but this time the process is done with the Reveal Animation.

Slide
The following predefined directions are supported by Slide Animation:

Down (Default)—The content is slid from top to bottom, and vice versa.
Up—The content is slid from bottom to top, and vice versa.
Left—The content is slid from right to left, and vice versa.
Right—The content is slid from left to right, and vice versa.

Now adjust or replace the code in the App.js file with the code below.

import { useState } from "react"
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(false);
    const [direction, setDirection] = React.useState("down");

    const onClick = () => {
    setShow(!show);
    };

    const onChange = (e) => {
    setDirection(e.target.value);
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div className="row">
    <div className="col-md-6">
    <dl>
        <dt>Slide: {direction}</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>

    <Slide direction={direction}>{children}</Slide>
    </div>
    <div className="col-md-6">
    <dl>
        <dt>Direction:</dt>
        <dd>
        <div className="example-config">
        <input
        id="up"
        className="k-radio"
        type="radio"
        name="direction"
        value="up"
        defaultChecked={direction === "up"}
        onClick={onChange}
        />
        <label htmlFor="up" className="k-radio-label">
        &nbsp;Up
        </label>
        <br />
        <input
        id="down"
        className="k-radio"
        type="radio"
        name="direction"
        value="down"
        defaultChecked={direction === "down"}
        onClick={onChange}
        />
        <label htmlFor="down" className="k-radio-label">
        &nbsp;Down
        </label>
        <br />
        <input
        id="left"
        className="k-radio"
        type="radio"
        name="direction"
        value="left"
        defaultChecked={direction === "left"}
        onClick={onChange}
        />
        <label htmlFor="left" className="k-radio-label">
        &nbsp;Left
        </label>
        <br />
        <input
        id="right"
        className="k-radio"
        type="radio"
        name="direction"
        value="right"
        defaultChecked={direction === "right"}
        onClick={onChange}
        />
        <label htmlFor="right" className="k-radio-label">
        &nbsp;Right
        </label>
        </div>
        </dd>
    </dl>
    </div>
    </div>
    );
};

Here we followed the same syntax as Expand, but the process is done with the Slide Animation this time.

Zoom
The following predefined directions are supported by Zoom Animation:

Out (Default)—The content is zoomed from the outside to the inside.
In—The content is zoomed from the inside to the outside.

Now adjust or replace the code in the App.js file with the code below.

import { useState } from "react"
import { Zoom } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [direction, setDirection] = useState("out");
    const [index, setIndex] = useState(1);

    const onClick = () => {
    setIndex(index + 1);
    };

    const onChange = (e) => {
    setDirection(e.target.value);
    };

    return (
    <div className="row">
    <div className="col-md-6">
    <dl>
        <dt>Zoom: {direction}</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>

    <Zoom direction={direction} stackChildren={true}>
        <div className="content" key={index}>
        {index}
        </div>
    </Zoom>
    </div>
    <div className="col-md-6">
    <dl>
        <dt>Direction:</dt>
        <dd>
        <div className="example-config">
        <input
        id="in"
        className="k-radio"
        type="radio"
        name="direction"
        value="in"
        defaultChecked={direction === "in"}
        onClick={onChange}
        />
        <label htmlFor="in" className="k-radio-label">
        &nbsp;In
        </label>
        <br />
        <input
        id="out"
        className="k-radio"
        type="radio"
        name="direction"
        value="out"
        defaultChecked={direction === "out"}
        onClick={onChange}
        />
        <label htmlFor="out" className="k-radio-label">
        &nbsp;Out
        </label>
        </div>
        </dd>
    </dl>
    </div>
    </div>
    );
};

Here, we followed the same syntax as Expand, but the process is done with the Zoom Animation, and we added stackChildren.

Exiting Child Components

Although the child component is exiting, it is still rendered because it is part of the React Virtual DOM but is no longer available in the DOM.

An exiting child element can apply reactive updates because it passes a childFactory function. The function controls the exiting and entering child components based on the provided props.

Now adjust or replace the code in the App.js file with the code below.

import { useState } from "react"
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(false);

    const onClick = () => {
    setShow(!show);
    };

    const children = show ? <div className="content">CONTENT</div> : null;

    const childFactory = (child) => {
    if (!child.props.in) {
    return React.cloneElement(child, {
    ...child.props,
    children: <div className="content">JUST CHANGED!</div>,
    });
    }

    return child;
    };

    return (
    <div className="example">
    <div>
    <dl>
        <dt>Slide:</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>

    <Slide childFactory={childFactory} transitionExitDuration={1500}>
        {children}
    </Slide>
    </div>
    </div>
    );
};

In the code above, the childFactory functions, which is passed in as props to the component Slide, is used by KendoReact to mutate the existing element to the new children element <div className="content">JUST CHANGED!</div> created using React.cloneElement.
The GIF below shows the result.

Animation Customization

Customization of the animation's behavior is done by configuring the Animation component.

You can use the transitionName property to update the Animation effect. The property defines the class name that is added to the exit or enter elements.

Entering Animations
Add the following code to your styles.css file.

.custom-animation-enter {
    transform: scale(0);
    transition: transform 500ms ease-in-out;
}
.custom-animation-enter-active {
    transform: scale(1);
}

In the code above, the CSS classes are used in configuring the entering animation. Next, adjust or replace the code in your App.js file to fit the code below.

import { useState } from "react"
import { Animation } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(true);

    const onClick = () => {
    setShow(!show);
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div>
    <dl>
    <dt>Animate:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Animation
    transitionName="custom-animation"
    transitionEnterDuration={300}
    exit={false}
    >
    {children}
    </Animation>
    </div>
    );
};

Here, we passed the transitionName as props with a value, which is the name (custom-animation) in our style.css file, and set the exit prop to false. The GIF below shows the result.

Exiting Animations
Once again, the CSS classes are used in configuring the exiting animation by using the following syntax:

Add the following code to your style.css file.

    .custom-animation-exit {
      transform: scale()1;
      transition: transform 500ms ease-in-out;
    }
    .custom-animation-exit-active {
      transform: scale(0);
    }

Next, adjust or replace the code in your App.js file to fit the code below.

import { useState } from "react"
import { Animation } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(true);

    const onClick = () => {
    setShow(!show);
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div>
    <dl>
    <dt>Slide:</dt>
    <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
    </dd>
    </dl>

    <Animation
    transitionName="custom-animation"
    transitionExitDuration={300}
    enter={false}
    >
    {children}
    </Animation>
    </div>
    );
};

Here what we did was to pass the transitionName as props with a value, which is the name (custom-animation) in our style.css file, and also set the enter prop to false.

Appearance of the React Animation Component

The Animations enable you to set custom CSS classes both to all wrapper Animation elements and all their child elements or to use their default styling options.

By default, the child component renders a k-child-animation-container CSS class, and the parent component renders a k-animation-container CSS class. You can use these CSS classes to style the components without specifying separate CSS classes.

Add the following code to your style.css file.

.k-animation-container {
    background-color: lightgray;
    }
    .k-animation-container > .k-child-animation-container {
    color: lightgray;
    background-color: #ff6757;
    }
    .example {
    display: flex;
    }

Now, adjust or replace your App.js file with the code below.

import { useState } from "react"
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";

const App = () => {
    const [show, setShow] = useState(false);

    const onClick = () => {
    setShow(!show);
    };

    const children = show ? <div className="content">CONTENT</div> : null;
    return (
    <div className="example">
    <div>
    <dl>
        <dt>Slide:</dt>
        <dd>
        <button className="k-button" onClick={onClick}>
        Animate
        </button>
        </dd>
    </dl>

    <Slide>{children}</Slide>
    </div>
    </div>
    );
};

In the code above, we set the className to k-button, which enabled us to access KendoReact predefined styles to alter our application's appearance. The GIF below shows the result.

Conclusion

KendoReact has delivered an easy-to-use, scalable animation library that has helped developers quickly add animation to their projects. I hope you found this post helpful.