react-smart-fields 1.0.0

package/README.md

@@ -0,0 +1,23 @@
+# 🧩 react-dynamic-fields
+
+> A flexible, customizable, and developer-friendly component to generate dynamic form fields in React. Supports all HTML inputs, validation, and styling out of the box.
+
+---
+
+## 🚀 Features
+
+✅ Supports all HTML field types (text, number, select, radio, checkbox, etc.)  
+✅ Real-time error validation (required & custom)  
+✅ Style customization with `style` or `className`  
+✅ Minimal setup – just pass a `fields` config  
+✅ React 18+ support  
+✅ TypeScript ready
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-dynamic-fields
+# or
+yarn add react-dynamic-fields

package/dist/components/DynamicField.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+type FieldType = "text" | "number" | "email" | "password" | "date" | "checkbox" | "radio" | "select";
+export interface FieldOption {
+    label: string;
+    value: string | number | boolean;
+}
+export interface FieldConfig {
+    name: string;
+    label?: string;
+    type: FieldType;
+    required?: boolean;
+    defaultValue?: any;
+    customValidation?: (value: any) => string | null;
+    options?: FieldOption[];
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface DynamicFieldsProps {
+    fields: FieldConfig[];
+    onChange?: (formData: {
+        [key: string]: any;
+    }, errors: {
+        [key: string]: string | null;
+    }) => void;
+}
+export declare const DynamicFields: React.FC<DynamicFieldsProps>;
+export {};

package/dist/components/DynamicField.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+export const DynamicFields = ({ fields, onChange, }) => {
+    const [formData, setFormData] = useState(() => {
+        const initial = {};
+        fields.forEach((f) => {
+            initial[f.name] =
+                f.type === "checkbox"
+                    ? f.defaultValue ?? false
+                    : f.defaultValue ?? "";
+        });
+        return initial;
+    });
+    const [errors, setErrors] = useState({});
+    const validateField = (field, value) => {
+        if (field.required && (value === "" || value === null || value === undefined || value === false)) {
+            return "This field is required";
+        }
+        if (field.customValidation)
+            return field.customValidation(value);
+        return null;
+    };
+    const handleChange = (name, value, field) => {
+        const newFormData = { ...formData, [name]: value };
+        const error = validateField(field, value);
+        const newErrors = { ...errors, [name]: error };
+        setFormData(newFormData);
+        setErrors(newErrors);
+        if (onChange)
+            onChange(newFormData, newErrors);
+    };
+    return (React.createElement(React.Fragment, null, fields.map((field) => (React.createElement("div", { key: field.name, style: { marginBottom: "1rem" } },
+        field.label && (React.createElement("label", { htmlFor: field.name, style: { display: "block" } }, field.label)),
+        field.type === "select" && (React.createElement("select", { name: field.name, className: field.className, style: field.style, value: formData[field.name], onChange: (e) => handleChange(field.name, e.target.value, field) },
+            React.createElement("option", { value: "" }, "Select an option"),
+            field.options?.map((opt) => (React.createElement("option", { key: String(opt.value), value: String(opt.value) }, opt.label))))),
+        field.type === "radio" &&
+            field.options?.map((opt) => (React.createElement("label", { key: String(opt.value), style: { marginRight: "1rem" } },
+                React.createElement("input", { type: "radio", name: field.name, value: String(opt.value), checked: formData[field.name] === opt.value, onChange: () => handleChange(field.name, opt.value, field) }),
+                " ",
+                opt.label))),
+        field.type === "checkbox" && (React.createElement("input", { type: "checkbox", name: field.name, checked: formData[field.name], className: field.className, style: field.style, onChange: (e) => handleChange(field.name, e.target.checked, field) })),
+        !["select", "radio", "checkbox"].includes(field.type) && (React.createElement("input", { type: field.type, name: field.name, value: formData[field.name], className: field.className, style: field.style, onChange: (e) => handleChange(field.name, e.target.value, field) })),
+        errors[field.name] && (React.createElement("p", { style: { color: "red", marginTop: "0.25rem" } }, errors[field.name])))))));
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { DynamicFields } from "./components/DynamicField";
+export type { FieldConfig, FieldOption } from "./components/DynamicField";

package/dist/index.js

@@ -0,0 +1 @@
+export { DynamicFields } from "./components/DynamicField";

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "react-smart-fields",
+    "version": "1.0.0",
+    "description": "> A flexible, customizable, and developer-friendly component to generate dynamic form fields in React. Supports all HTML inputs, validation, and styling out of the box.",
+    "license": "MIT",
+    "author": "Pratik Panchal",
+    "type": "commonjs",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "tsc"
+    },
+    "dependencies": {
+        "csstype": "^3.1.3",
+        "js-tokens": "^4.0.0",
+        "loose-envify": "^1.4.0",
+        "react": "^18.3.1"
+    },
+    "devDependencies": {
+        "typescript": "^5.0.0",
+        "@types/react": "^18.0.0"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0"
+    }
+}

package/src/components/DynamicField.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+
+type FieldType =
+  | "text"
+  | "number"
+  | "email"
+  | "password"
+  | "date"
+  | "checkbox"
+  | "radio"
+  | "select";
+
+export interface FieldOption {
+  label: string;
+  value: string | number | boolean;
+}
+
+export interface FieldConfig {
+  name: string;
+  label?: string;
+  type: FieldType;
+  required?: boolean;
+  defaultValue?: any;
+  customValidation?: (value: any) => string | null;
+  options?: FieldOption[]; // for select & radio
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+interface DynamicFieldsProps {
+  fields: FieldConfig[];
+  onChange?: (
+    formData: { [key: string]: any },
+    errors: { [key: string]: string | null }
+  ) => void;
+}
+
+export const DynamicFields: React.FC<DynamicFieldsProps> = ({
+  fields,
+  onChange,
+}) => {
+  const [formData, setFormData] = useState<{ [key: string]: any }>(() => {
+    const initial: any = {};
+    fields.forEach((f) => {
+      initial[f.name] =
+        f.type === "checkbox"
+          ? f.defaultValue ?? false
+          : f.defaultValue ?? "";
+    });
+    return initial;
+  });
+
+  const [errors, setErrors] = useState<{ [key: string]: string | null }>({});
+
+  const validateField = (field: FieldConfig, value: any) => {
+    if (field.required && (value === "" || value === null || value === undefined || value === false)) {
+      return "This field is required";
+    }
+    if (field.customValidation) return field.customValidation(value);
+    return null;
+  };
+
+  const handleChange = (
+    name: string,
+    value: any,
+    field: FieldConfig
+  ) => {
+    const newFormData = { ...formData, [name]: value };
+    const error = validateField(field, value);
+    const newErrors = { ...errors, [name]: error };
+
+    setFormData(newFormData);
+    setErrors(newErrors);
+
+    if (onChange) onChange(newFormData, newErrors);
+  };
+
+  return (
+    <>
+      {fields.map((field) => (
+        <div key={field.name} style={{ marginBottom: "1rem" }}>
+          {field.label && (
+            <label htmlFor={field.name} style={{ display: "block" }}>
+              {field.label}
+            </label>
+          )}
+
+          {/* Select Dropdown */}
+          {field.type === "select" && (
+            <select
+              name={field.name}
+              className={field.className}
+              style={field.style}
+              value={formData[field.name]}
+              onChange={(e) =>
+                handleChange(field.name, e.target.value, field)
+              }
+            >
+              <option value="">Select an option</option>
+              {field.options?.map((opt) => (
+                <option key={String(opt.value)} value={String(opt.value)}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          )}
+
+          {/* Radio Buttons */}
+          {field.type === "radio" &&
+            field.options?.map((opt) => (
+              <label key={String(opt.value)} style={{ marginRight: "1rem" }}>
+                <input
+                  type="radio"
+                  name={field.name}
+                  value={String(opt.value)}
+                  checked={formData[field.name] === opt.value}
+                  onChange={() =>
+                    handleChange(field.name, opt.value, field)
+                  }
+                />{" "}
+                {opt.label}
+              </label>
+            ))}
+
+          {/* Checkbox */}
+          {field.type === "checkbox" && (
+            <input
+              type="checkbox"
+              name={field.name}
+              checked={formData[field.name]}
+              className={field.className}
+              style={field.style}
+              onChange={(e) =>
+                handleChange(field.name, e.target.checked, field)
+              }
+            />
+          )}
+
+          {/* Other Inputs (text, email, number, etc.) */}
+          {!["select", "radio", "checkbox"].includes(field.type) && (
+            <input
+              type={field.type}
+              name={field.name}
+              value={formData[field.name]}
+              className={field.className}
+              style={field.style}
+              onChange={(e) =>
+                handleChange(field.name, e.target.value, field)
+              }
+            />
+          )}
+
+          {/* Error Display */}
+          {errors[field.name] && (
+            <p style={{ color: "red", marginTop: "0.25rem" }}>
+              {errors[field.name]}
+            </p>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { DynamicFields } from "./components/DynamicField";
+export type { FieldConfig, FieldOption } from "./components/DynamicField";

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Node"
+  },
+  "include": ["src"]
+}