emptybd-form

v1.1.8

Published

6 months ago

A reusable and dynamic form component for **React, Next.js and Raw HTML projects**, built with **TypeScript** and styled using **Tailwind CSS**. Designed for dashboards, admin panels, and partner integrations where forms are rendered dynamically using a u

0High
0Medium
0Low

mubin33

📦 EmptyBD Form

A reusable and dynamic form component for React, Next.js and Raw HTML projects, built with TypeScript and styled using Tailwind CSS. Designed for dashboards, admin panels, and partner integrations where forms are rendered dynamically using a unique project key.

✨ Features

✅ Works with React & Next.js
✅ CDN support for normal HTML websites
✅ Dynamic form rendering using key
✅ Fully customizable styling
✅ Secure partner-based usage system
✅ Lightweight and easy to integrate

🔐 Support Policy

Official Support: Full support will be provided only to the registered user of the package.

Third-Party Support: Requests from anyone other than the registered user will not be entertained.

This ensures focused, secure, and professional assistance for verified users.

📥 Installation

Using npm:

npm install emptybd-form

Using yarn:

yarn add emptybd-form

🚀 React / Next.js Usage

import EmptyBDForm from 'emptybd-form';

const MyPage = () => {
  return (
    <EmptyBDForm
      dataKey="projectkey123"
      styles={{
        button: { backgroundColor: '#2563eb', color: '#fff' },
        label: { fontWeight: 'bold' }
      }}
    />
  );
};

export default MyPage;

🌐 Raw HTML / Vanilla JS Usage (Without React)

If your website is built with plain HTML, CSS, and JavaScript, you can still use EmptyBD Form via CDN.

✅ Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EmptyBD Form Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>

    <div id="my-form"></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
    <script>
        window.renderEmptyBDForm("#my-form", "projectkey123", {
            button: {
                backgroundColor: "#000",
                color: "black",
                fontWeight: "bold",
                borderRadius: "2px"
            },
        });
    </script>


</body>

</html>

🧩 Function Signature (CDN Mode)

window.renderEmptyBDForm(selector, dataKey, styles);

| Parameter | Type | Description | | --------- | ----------------- | ----------------------------------------- | | selector | string | Target container selector (e.g. #my-form) | | dataKey | string | Unique project / partner key | | styles | object (optional) | Custom styling configuration |

🎨 Styling Options

styles?: {
  form?: CSSProperties;
  button?: CSSProperties;
  label?: CSSProperties;
  input?: {
    text?: CSSProperties;
    select?: CSSProperties;
  };
}

Example:

styles: {
  button: { backgroundColor: 'red', color: '#fff' },
  label: { fontSize: '14px' },
  input: {
    text: { border: '1px solid gray' }
  }
}

📦 Package Info

Name: emptybd-form
Version: 1.1.7
Framework: React + TypeScript
Styling: Tailwind + Inline CSS

🛡 Security Note

Each form is rendered based on a unique dataKey. Unauthorized keys will not render form data or functionality.

📞 Need Help?

Support is available only for registered package users. Please contact EmptyBD official support for assistance.

⭐ Summary

✔ React & Next.js Ready
✔ CDN Support for HTML sites
✔ Secure key-based system
✔ Highly customizable

Made with ❤️ by EmptyBD Team