formkit-lazy-plugin

formkit-lazy-plugin

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.

Usage

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.

Development

• 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

License

Made with 💛

Published under MIT License.