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
-
Create the application.
npm create vite@latest
or
yarn create vite
After executing the command, the interface will ask you to apply additional configurations to your project:
- 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
.
-
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.
-
Finally, run the newly created project.
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.
#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:
npm 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.
import {
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
- After importing the needed components, you can render the Form component as follows in
App.jsx
.
function 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
-
Remove the default styling that is applied to the project by removing the
index.css
import inmain.jsx
. -
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.
npm install @progress/kendo-theme-default
- Import the KendoReact Default theme in your
main.jsx
.
import "@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.