Using with Vite

You can use the Vite build tool to bootstrap a KendoReact project supporting both JSX and Typescript.

Prerequisites

• React 18
• Node.js 18 or greater (required by Vite)
• A bash terminal of your choice

1. Create the application.

   Copy Codenpm create vite@latest

   or

   Copy Codeyarn create vite

After executing the command, the interface will ask you to apply additional configurations to your project:

1. Set the project name:

Here you can define the name of your project. For the needs of the current article, set the name of the application as my-app.

2. When prompted, complete the step-by-step interactive project configuration. Make sure to select React as the project framework. You can choose any of the suggested variants.

3. Finally, run the newly created project.

Copy Code    cd my-app
    npm install
    npm run dev

tip You can skip the step-by-step project configuration by specifying the project name and adding -- --template if you are using NPM or --template if you are using Yarn straight from the command line. See Scaffolding Your First Vite Project for more CLI options.

Copy Code    #npm
    npm create vite@latest my-app -- --template react

    # yarn
    yarn create vite my-app --template react

Using KendoReact Components in a Vite Project

You can use any KendoReact component in your Vite project.

In the sections below, you will learn how to create a simple form with two input form fields and a button to submit the form. You will use the following KendoReact components: Form, Input, and Button. The provided sample code shows a JavaScript implementation.

Install the required dependencies

Install the dependencies for KendoReact Form, Input, and Button:

Copy Codenpm install @progress/kendo-react-form @progress/kendo-react-inputs @progress/kendo-react-buttons @progress/kendo-licensing

The package names and dependencies for each component are provided in their Getting Started pages.

Import the Form and Input components

In App.jsx, import the Form, Field, FormElement, FieldWrapper, Input, and Button components.

Copy Codeimport {
  Form,
  Field,
  FormElement,
  FieldWrapper,
} from "@progress/kendo-react-form";

import { Input } from "@progress/kendo-react-inputs";
import { Button } from '@progress/kendo-react-buttons';

Use the Form Component

1. After importing the needed components, you can render the Form component as follows in App.jsx.

Copy Codefunction App() {
  const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
  return (
    <Form
    onSubmit={handleSubmit}
    render={(formRenderProps) => (
      <FormElement
        style={{
          maxWidth: 650,
        }}
      >
        <FieldWrapper>
          <div className="k-form-field-wrap">
            <Field
              name={'firstName'}
              component={Input}
              labelClassName={'k-form-label'}
              label={'First name'}
            />
          </div>
        </FieldWrapper>
        <FieldWrapper>
          <div className="k-form-field-wrap">
            <Field
              name={'lastName'}
              component={Input}
              labelClassName={'k-form-label'}
              label={'Last name'}
            />
          </div>
        </FieldWrapper>
        <div className="k-form-buttons">
          <Button type={'submit'} disabled={!formRenderProps.allowSubmit}>
            Submit
          </Button>
        </div>
      </FormElement>
    )}
  />
  )
}

export default App

2. Remove the default styling that is applied to the project by removing the index.css import in main.jsx.

3. To style the Form component as well as the Input and Button, install the Default theme, which is one of the four beautiful themes for KendoReact.

Copy Codenpm install @progress/kendo-theme-default

4. Import the KendoReact Default theme in your main.jsx.

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

After completing the above steps, run the project using npm run dev and navigate to the URL displayed in the console. You can view all the available commands in the scripts property in package.json.

For more detailed information and richer demos for the KendoReact Form, you can check its documentation articles.

Activating the License

Using any of the KendoReact UI components requires a commercial license key or an active trial license key. For more information about how to configure your license key, see Set Up Your KendoReact License Key.

Starting with KendoReact version 5.16.0, a missing license causes a watermark to appear over selected components. For more information, see Invalid License.

Suggested Links

• Getting Started with Vite
• Progress Design System
• ThemeBuilder
• KendoReact Docs and Demos
• All Things React Telerik Blog Page