flexiforms

flexiforms is a powerful and flexible dynamic form builder package for React applications. It allows users to effortlessly create, customize, and manage forms using an intuitive drag-and-drop interface. The package supports seamless integration with both Vite and Next.js frameworks. To function correctly, it requires the host project to define specific environment variables.

---

Features

- 🚀 Drag-and-Drop Form Builder: Design and customize forms without writing extensive code using an easy-to-use interface.
- 🔗 Dynamic API Integration: Fetch and render form definitions and associated data dynamically from your backend.
- 🖥️ Framework Compatibility: Fully supports Vite and Next.js environments for maximum flexibility in modern React applications.
- 📄 CMS Integration: Easily embed and render forms dynamically on content-managed pages.
- ⚙️ Customizable: Supports unique form identifiers (doctypeCode) to target specific use cases.

Installation

To install flexiforms, using npm or yarn:

``bash

npm install flexiforms

`

OR

`bash

yarn add flexiforms

`

Usage

After installation, flexiforms can be integrated into your React project in multiple ways, depending on your use case. Below are examples of its key functionalities.

Admin Dashboard (Form Builder)

To include the form builder dashboard in your admin interface:

`tsx
"use client";
import React from "react";
import { FormDashboard } from "flexiforms";

const AdminPage = () => {
return (
<>


);
};

export default AdminPage;
`

This component renders the drag-and-drop form builder, which administrators can use to create and manage forms.

Rendering Forms on the Frontend

To display a form based on API data in your frontend application:

`tsx
"use client";
import axios from "axios";
import { FrontendForm } from "flexiforms";
import React from "react";

const FormPage = () => {
const jsonURL = process.env.NEXT_PUBLIC_JSON_SERVER_URL;
const dbJsonURL = process.env.NEXT_PUBLIC_JSON_SERVER_DB_URL as string;

return (
jsonURL={jsonURL}
dbJsonURL={dbJsonURL}
formId={"123456789"} // Replace '123456789' with your doctypeCode
/>
);
};

export default FormPage;
`

The FrontendForm component dynamically fetches and renders the form using the provided API URLs and unique doctypeCode.

Rendering Forms Through a CMS Page

flexiforms can also integrate with CMS pages to dynamically display forms and content:

`tsx
"use client";
import React from "react";
import { FrontendForm } from "flexiforms";
import { parseContent } from "flexiforms";

const FormPage = () => {
const jsonURL = process.env.NEXT_PUBLIC_JSON_SERVER_URL;
const dbJsonURL = process.env.NEXT_PUBLIC_JSON_SERVER_DB_URL as string;
const [contentParts, setContentParts] = useState<
{ type: string; value: string }[]
>([]);

const fetchContentData = async () => {
setLoading(true);
try {
const response: any = await fetchCMSContent(slug);
if (response.status) {
setCmsData(response.data);

// Extract doctypeCode from the content parseContent function get from flexiforms package
const extractedParts = parseContent(response?.data?.content);
setContentParts(extractedParts);
} else {
setError(response.message);
}
} catch (err) {
setError("Error fetching CMS content.");
} finally {
setLoading(false);
}
};

return (
// for rendering the forms through the CMS page