{"_id":"@7span/react-form","_rev":"4-eb66be1e37c1040f6d007d3465bebe29","name":"@7span/react-form","dist-tags":{"latest":"1.0.3"},"versions":{"0.1.0":{"name":"@7span/react-form","version":"0.1.0","_id":"@7span/react-form@0.1.0","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"dist":{"shasum":"e4c1f07477809b81d42d41a3f2d22a6635df78e1","tarball":"https://registry.npmjs.org/@7span/react-form/-/react-form-0.1.0.tgz","fileCount":4,"integrity":"sha512-7SZZgkoJjq9OMUsEdx9R9mrAeDti9UoF1cDo1M3S8hHk6DxGVJPGaIuCk7JBpoF0IW0Pu3axOyLkrv3ldoyujA==","signatures":[{"sig":"MEYCIQDrzhHxk2hD9MrGOdjkCgTKM3kub65kGi++JBCvESlPUAIhAKqOgejl07Z2KzrlM9vEpyXRa5VXTzZognGZGN+mShYA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33821},"main":"dist/react-form.js","type":"module","gitHead":"61b28ff99b599d0259da5fbda7f2b84357b43f19","scripts":{"dev":"vite","lint":"eslint . --fix","build":"vite build","format":"prettier --write src/","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"_npmVersion":"10.9.4","description":"Dynamic forms for React - Generate forms from JSON field definitions.","directories":{},"_nodeVersion":"22.21.1","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_0.1.0_1768206154205_0.5445868132561127","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@7span/react-form","version":"1.0.1","_id":"@7span/react-form@1.0.1","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"dist":{"shasum":"00e49cfa0c16b482acee46d47d8c733cf879cb08","tarball":"https://registry.npmjs.org/@7span/react-form/-/react-form-1.0.1.tgz","fileCount":4,"integrity":"sha512-FYMCfDCkhUBhwxO0Xvi0erJ/gnL9c150aUcR3KENhVHeogI3DaBAhDWmEu2d+H+dhNGCFftq/AE6bZb7t8dnZg==","signatures":[{"sig":"MEMCICCi0M5Uhl6F0QVlQ7vxpFgz+X2N8z48hXJQj5Uxe+svAh9Id1svXGzif9YOypuOW6WtL7+OEWl+c5L+nDHnvge5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34118},"main":"dist/react-form.js","type":"module","gitHead":"a27103e11281469efef3ebb7cbf0ad317525f9d3","scripts":{"dev":"vite","lint":"eslint . --fix","build":"vite build","format":"prettier --write src/","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"_npmVersion":"10.9.4","description":"Dynamic forms for React - Generate forms from JSON field definitions.","directories":{},"_nodeVersion":"22.21.1","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_1.0.1_1769604915027_0.7281079724160835","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@7span/react-form","version":"1.0.2","_id":"@7span/react-form@1.0.2","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"dist":{"shasum":"373f10d2218258ddedff9ec9d3e4ad75b0f3a62a","tarball":"https://registry.npmjs.org/@7span/react-form/-/react-form-1.0.2.tgz","fileCount":4,"integrity":"sha512-LQ4vnUbGjiN1spQBx2eIbhy8sJG8jFO7ZXnyuZa5p6Bd6Owc3XEZtjMOQpM2yRPOpQ9IcG30V4SZHgc4bt/99w==","signatures":[{"sig":"MEUCIA17cS4rWLcN1oTA8GWA2k7pXmBZ2H+ZBfQt1Fzpf9MGAiEAw3TrpEuKzmzuFwg7mWktfZuGu2rN81dUSnJGJgoiAk0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34430},"main":"dist/react-form.js","type":"module","gitHead":"2a02fdc33a9ff99fca1ebbad7f9eec6c9ae0b100","scripts":{"dev":"vite","lint":"eslint . --fix","build":"vite build","format":"prettier --write src/","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"_npmVersion":"10.9.4","description":"Dynamic forms for React - Generate forms from JSON field definitions.","directories":{},"_nodeVersion":"22.21.1","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-form_1.0.2_1769694372986_0.8926019372175276","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@7span/react-form","version":"1.0.3","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"eslint . --fix","format":"prettier --write src/","prepublishOnly":"npm run build"},"main":"dist/react-form.js","publishConfig":{"access":"public"},"dependencies":{},"devDependencies":{"@vitejs/plugin-react":"^5.1.1","vite":"^7.2.4"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_id":"@7span/react-form@1.0.3","gitHead":"ad1f50c640c006cdfa3ce1ef2028979e58af9b75","description":"Dynamic forms for React - Generate forms from JSON field definitions.","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-VLrvWdoAg/ifpBndfW3rinO5oVrLZ0bD9RfSgUTOrPFkxquOG3Y1yb8cjpVBO6k2s+hqrrRjJ2LKgJ4lcYREQA==","shasum":"b1707577e48471b5f0658fdd27d574e045a90d36","tarball":"https://registry.npmjs.org/@7span/react-form/-/react-form-1.0.3.tgz","fileCount":4,"unpackedSize":32621,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDCRRG11DKWhisxw7uN+F3pOasPPZbb3+QHWPuo+VG8cgIgCGKHRYxJxTI4OYgzXwfjyFpZweAZMbNeuGV0nFZN04E="}]},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"directories":{},"maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-form_1.0.3_1770016571613_0.5133549400980932"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-12T08:22:34.121Z","modified":"2026-02-02T07:16:11.887Z","0.1.0":"2026-01-12T08:22:34.344Z","1.0.1":"2026-01-28T12:55:15.183Z","1.0.2":"2026-01-29T13:46:13.191Z","1.0.3":"2026-02-02T07:16:11.749Z"},"description":"Dynamic forms for React - Generate forms from JSON field definitions.","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"readme":"# @7span/react-form\n\nDynamic forms for React - Generate forms from JSON field definitions.\n\n## Installation\n\n```bash\nnpm install @7span/react-form\n```\n\n## Quick Start\n\n```jsx\nimport {\n  ReactForm,\n  ReactFormFields,\n  ReactFormField,\n  ReactFormCreate,\n  ReactFormUpdate,\n} from \"@7span/react-form\";\n\nfunction App() {\n  const schema = z.object({\n    name: z.string().min(2, \"Name must be at least 2 characters\"),\n    email: z.string().email(\"Invalid email address\"),\n  });\n\n  const create = (context) => {\n    return Promise.resolve({ values: context.values });\n  };\n\n  const update = (itemId, context) => {\n    return Promise.resolve({ values: context.values });\n  };\n\n  return (\n    <ReactForm schema={schema} create={create} update={update}>\n      {({ context }) => (\n        <>\n          <ReactFormFields>\n            {({ values }) => (\n              <>\n                <ReactFormField name=\"name\">\n                  {({ field, label }) => (\n                    <>\n                      <label>{label}</label>\n                      <input {...field} />\n                    </>\n                  )}\n                </ReactFormField>\n                <ReactFormField name=\"email\">\n                  {({ field, label }) => (\n                    <>\n                      <label>{label}</label>\n                      <input type=\"email\" {...field} />\n                    </>\n                  )}\n                </ReactFormField>\n              </>\n            )}\n          </ReactFormFields>\n          <ReactFormCreate />\n          <ReactFormUpdate />\n        </>\n      )}\n    </ReactForm>\n  );\n}\n```\n\n## Components\n\n- `ReactForm` - Root form component\n- `ReactFormFields` - Field container component\n- `ReactFormField` - Individual field wrapper\n- `ReactFormCreate` - Create button component\n- `ReactFormUpdate` - Update button component\n- `ReactFormDelete` - Delete button component\n- `ReactFormArchive` - Archive button component\n- `ReactFormUnarchive` - Unarchive button component\n- `ReactFormError` - Error display component\n\n## Features\n\n- Dynamic form generation from field definitions\n- CRUD operations (Create, Read, Update, Delete, Archive, Unarchive)\n- State management using React Context\n- Field configuration (strings or objects)\n- Error handling with customizable error adapters\n- Granular components for flexible composition\n- **Schema Support** - Accepts custom validation schemas (Zod, Yup, or any validation library)\n- **Custom Validation** - Provide your own `validateSchema` function\n- **Field Extraction** - Custom `schemaToFields` function to extract fields from schemas\n- Field-level and form-level validation errors\n- Built-in error management utilities\n\n## Validation\n\nThe library supports validation through custom `validateSchema` and `schemaToFields` functions. You can use any validation library (Zod, Yup, or custom). Install the validation library of your choice:\n\n```bash\n# For Zod (example)\nnpm install zod@^4.2.1\n\n# For Yup (example)\nnpm install yup@^1.7.1\n```\n\n### Basic Usage with Validation\n\n```jsx\nimport {\n  ReactForm,\n  ReactFormProvider,\n  ReactFormField,\n} from \"@7span/react-form\";\nimport { z } from \"zod\";\n\nconst schema = z.object({\n  name: z.string().min(2, \"Name must be at least 2 characters\"),\n  email: z.string().email(\"Invalid email address\"),\n});\n\n// Custom validation function\nconst validateSchema = async (schema, values) => {\n  const result = schema.safeParse(values);\n  if (result.success) {\n    return { success: true, errors: {} };\n  }\n\n  const fieldErrors = result.error.issues.reduce((acc, issue) => {\n    const field = issue.path[0]; // \"id\", \"email\", etc.\n    if (!field) return acc;\n\n    acc[field] = {\n      message: issue.message, // ← EXACT message from schema\n    };\n    return acc;\n  }, {});\n\n  return { success: false, errors: fieldErrors };\n};\n\n// Custom schema to fields converter\nconst schemaToFields = (schema) => {\n  return Object.keys(schema.shape).map((key) => {\n    const zodField = schema.shape[key];\n    /* \n      - \"defaultValue\" & \"description\" key can be vary or not found \n      with different zod version (current - v4)\n      - check it with console.log(\"zodField:\", zodField);  \n      - Need to map the keys accordingly\n      */\n    const defaultValue = zodField.def.defaultValue;\n    const label = zodField.description;\n\n    return {\n      name: key,\n      label: label || key.charAt(0).toUpperCase() + key.slice(1),\n      value: defaultValue,\n    };\n  });\n};\n\nfunction MyForm() {\n  return (\n    <ReactFormProvider\n      schemaToFields={schemaToFields}\n      validateSchema={validateSchema}\n    >\n      <ReactForm\n        schema={schema}\n        create={async (context) => {\n          console.log(\"Valid data:\", context.values);\n        }}\n      >\n        {({ context }) => (\n          <>\n            <ReactFormField name=\"name\">\n              {({ field, label, error }) => (\n                <>\n                  <label>{label}</label>\n                  <input {...field} />\n                  {error && <span className=\"error\">{error.message}</span>}\n                </>\n              )}\n            </ReactFormField>\n            <ReactFormField name=\"email\">\n              {({ field, label, error }) => (\n                <>\n                  <label>{label}</label>\n                  <input type=\"email\" {...field} />\n                  {error && <span className=\"error\">{error.message}</span>}\n                </>\n              )}\n            </ReactFormField>\n          </>\n        )}\n      </ReactForm>\n    </ReactFormProvider>\n  );\n}\n```\n\nSee [VALIDATION.md](./VALIDATION.md) for detailed validation documentation.\n\n## Exports\n\nThe package exports all components, context utilities, and error management functions:\n\n```jsx\nimport {\n  // Components\n  ReactForm,\n  ReactFormFields,\n  ReactFormField,\n  ReactFormCreate,\n  ReactFormUpdate,\n  ReactFormDelete,\n  ReactFormArchive,\n  ReactFormUnarchive,\n  ReactFormError,\n  // Context & Providers\n  ReactFormProvider,\n  useReactForm,\n  // Utilities\n  attrSerializer,\n  // Error Management\n  getFieldError,\n  setFieldError,\n  setFieldErrors,\n  clearAllErrors,\n  clearFieldError,\n} from \"@7span/react-form\";\n```\n\n## Documentation\n\nSee the [documentation](https://github.com/7span/react-form) for more details.\n","readmeFilename":"README.md"}