The Lazy plugin for FormKit allows you to effortlessly handle asynchronous data fetching and form population. With this plugin, you can easily load data into your form components while displaying a loading state until the data is resolved.
Install package:
# npm
npm install formkit-lazy-plugin
# yarn
yarn add formkit-lazy-plugin
# pnpm
pnpm install formkit-lazy-plugin
Add to formkit.config
:
// ESM
import { createLazyPlugin } from "formkit-lazy-plugin";
// CommonJS
const { createLazyPlugin } = require("formkit-lazy-plugin");
// Formkit config
const config: DefaultConfigOptions = {
plugins: [createLazyPlugin()]
}
Add the lazy
prop to your FormKit component and pass either a promise or a function that returns a promise. This promise represents the asynchronous data fetching operation.
<script setup>
const fetchData = () => fetch(...)
</script>
<template>
<FormKit type="form" :lazy="fetchData">
...
</FormKit>
</template>
As soon as the promise is resolved, the form will automatically populate with the fetched data. In the meantime, the form will display a loading state, providing a smooth user experience.
- Clone this repository
- Install latest LTS version of Node.js
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install
- Run interactive tests using
pnpm dev
Made with 💛
Published under MIT License.