dynamic form builder
npm install flexiformsflexiforms 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.
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
{contentParts.map((part, index) => (
{part.type === "text" && (
)}
{part.type === "form" && (
jsonURL={jsonURL}
dbJsonURL={dbJsonURL}
formId={part.value}
/>
)}
))}
);
};
export default FormPage;
`
This example demonstrates how to parse CMS content and render forms dynamically based on embedded identifiers.
Environment Variables
To ensure flexiforms operates correctly, configure the following environment variables:
$3
Add these to your .env file:
`bash
VITE_JSON_SERVER_URL = https://api.example.com
VITE_JSON_SERVER_DB_URL = https://db.example.com
`
$3
Add these to your .env file:
`bash
NEXT_PUBLIC_JSON_SERVER_URL=https://api.example.com
NEXT_PUBLIC_JSON_SERVER_DB_URL=https://db.example.com
`
Explanation of Variables:
JSON_SERVER_URL: The endpoint for fetching form metadata or schema.
JSON_SERVER_DB_URL: The endpoint for interacting with form submission data.
Replace the placeholder URLs with the actual endpoints for your API.
Additional Notes
- 🔑 Unique Doctype Codes: The doctypeCode parameter uniquely identifies each form. Ensure you use the correct code corresponding to the form you want to display.
- 🧩 Content Parsing: Use the parseContent function to efficiently separate text and form components from CMS data, making dynamic content rendering seamless.
- ⚠️ Error Handling: Implement robust error handling for API calls to ensure a smooth user experience.
#
By following this guide, you can fully integrate flexiforms` into your React applications, enabling dynamic and customizable form building capabilities with minimal effort.