@7span/react-form

Dynamic forms for React - Generate forms from JSON field definitions.

Installation

``bash
npm install @7span/react-form
`

Quick Start

`jsx
import {
ReactForm,
ReactFormFields,
ReactFormField,
ReactFormCreate,
ReactFormUpdate,
} from "@7span/react-form";

function App() {
const schema = z.object({
name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"),
});

const create = (context) => {
return Promise.resolve({ values: context.values });
};

const update = (itemId, context) => {
return Promise.resolve({ values: context.values });
};

return (

{({ context }) => (
<>

{({ values }) => (
<>

{({ field, label }) => (
<>
{label}


)}


{({ field, label }) => (
<>
{label}


)}


)}




)}

);
}
`

Components

- ReactForm - Root form component
- ReactFormFields - Field container component
- ReactFormField - Individual field wrapper
- ReactFormCreate - Create button component
- ReactFormUpdate - Update button component
- ReactFormDelete - Delete button component
- ReactFormArchive - Archive button component
- ReactFormUnarchive - Unarchive button component
- ReactFormError - Error display component

Features

- Dynamic form generation from field definitions
- CRUD operations (Create, Read, Update, Delete, Archive, Unarchive)
- State management using React Context
- Field configuration (strings or objects)
- Error handling with customizable error adapters
- Granular components for flexible composition
- Schema Support - Accepts custom validation schemas (Zod, Yup, or any validation library)
- Custom Validation - Provide your own validateSchema function
- Field Extraction - Custom schemaToFields function to extract fields from schemas
- Field-level and form-level validation errors
- Built-in error management utilities

Validation

The 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:

`bash


For Zod (example)

npm install zod@^4.2.1

For Yup (example)

npm install yup@^1.7.1
`

$3

`jsx
import {
ReactForm,
ReactFormProvider,
ReactFormField,
} from "@7span/react-form";
import { z } from "zod";

const schema = z.object({
name: z.string().min(2, "Name must be at least 2 characters"),
email: z.string().email("Invalid email address"),
});

// Custom validation function
const validateSchema = async (schema, values) => {
const result = schema.safeParse(values);
if (result.success) {
return { success: true, errors: {} };
}

const fieldErrors = result.error.issues.reduce((acc, issue) => {
const field = issue.path[0]; // "id", "email", etc.
if (!field) return acc;

acc[field] = {
message: issue.message, // ← EXACT message from schema
};
return acc;
}, {});

return { success: false, errors: fieldErrors };
};

// Custom schema to fields converter
const schemaToFields = (schema) => {
return Object.keys(schema.shape).map((key) => {
const zodField = schema.shape[key];
/*
- "defaultValue" & "description" key can be vary or not found
with different zod version (current - v4)
- check it with console.log("zodField:", zodField);
- Need to map the keys accordingly
*/
const defaultValue = zodField.def.defaultValue;
const label = zodField.description;

return {
name: key,
label: label || key.charAt(0).toUpperCase() + key.slice(1),
value: defaultValue,
};
});
};

function MyForm() {
return (
schemaToFields={schemaToFields}
validateSchema={validateSchema}
>
schema={schema}
create={async (context) => {
console.log("Valid data:", context.values);
}}
>
{({ context }) => (
<>

{({ field, label, error }) => (
<>
{label}

{error && {error.message}}

)}


{({ field, label, error }) => (
<>
{label}

{error && {error.message}}

)}


)}


);
}
`

See VALIDATION.md for detailed validation documentation.

Exports

The package exports all components, context utilities, and error management functions:

`jsx
import {
// Components
ReactForm,
ReactFormFields,
ReactFormField,
ReactFormCreate,
ReactFormUpdate,
ReactFormDelete,
ReactFormArchive,
ReactFormUnarchive,
ReactFormError,
// Context & Providers
ReactFormProvider,
useReactForm,
// Utilities
attrSerializer,
// Error Management
getFieldError,
setFieldError,
setFieldErrors,
clearAllErrors,
clearFieldError,
} from "@7span/react-form";
``

Documentation

See the documentation for more details.