flexiforms v1.1.11

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:

npm install flexiforms

OR

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:

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

const AdminPage = () => {
  return (
    <>
      <FormDashboard />
    </>
  );
};

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:

"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 (
    <FrontendForm
      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:

"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
    <div className="text-[#142A4A] text-[16px] leading-normal font-light my-8">
      {contentParts.map((part, index) => (
        <React.Fragment key={index}>
          {part.type === "text" && (
            <div dangerouslySetInnerHTML={{ __html: part.value }} />
          )}
          {part.type === "form" && (
            <FrontendForm
              jsonURL={jsonURL}
              dbJsonURL={dbJsonURL}
              formId={part.value}
            />
          )}
        </React.Fragment>
      ))}
    </div>
  );
};

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:

For Vite :

Add these to your .env file:

VITE_JSON_SERVER_URL = https://api.example.com
VITE_JSON_SERVER_DB_URL = https://db.example.com

For Next.js:

Add these to your .env file:

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.