Getting Started

Installation

npm

npm install @7span/react-form

pnpm

pnpm add @7span/react-form

yarn

yarn add @7span/react-form

Configuring the Provider

Before using ReactForm in your components, you can configure global options using ReactFormProvider:

App.jsx

import { ReactFormProvider } from "@7span/react-form";
import App from "./App";

function Root() {
  return (
    <ReactFormProvider
      isNewItemCheck={({ itemId }) => {
        return itemId === "create";
      }}
      isArchivedItemCheck={(response) => {
        return response.isArchived == true;
      }}
      errorAdapter={(error) => {
        return {
          name: error.name || "Unknown Error",
          message: error.message || "There was an unknown error. Please try again.",
          fieldErrors: error.errors || {},
        };
      }}
    >
      <App />
    </ReactFormProvider>
  );
}

Using in Components

Once the provider is configured, you can use the <ReactForm> component anywhere in your app to power CRUDs.

jsx

import {
  ReactForm,
  ReactFormFields,
  ReactFormField,
  ReactFormError,
  ReactFormCreate,
  ReactFormUpdate,
  ReactFormDelete,
  ReactFormArchive,
  ReactFormUnarchive,
} from "@7span/react-form";

function MyForm({ itemId }) {
  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) => {
    // API Call to create the item
    return Promise.resolve({
      values,
      isArchived,
    });
  };

  const read = (itemId) => {
    // API Call to get data
    return Promise.resolve({
      values,
      isArchived,
    });
  };

  const update = (itemId, context) => {
    // API Call to update the data
    return Promise.resolve({
      values,
      isArchived,
    });
  };

  const del = (itemId, context) => {
    // API Call to delete the item
    return Promise.resolve({});
  };

  const archive = (itemId, context) => {
    // API Call to archive the item
    return Promise.resolve({
      values,
      isArchived,
    });
  };

  const unarchive = (itemId, context) => {
    // API Call to unarchive the item
    return Promise.resolve({
      values,
      isArchived,
    });
  };

  return (
    <ReactForm
      schema={schema}
      create={create}
      read={read}
      update={update}
      delete={del}
      archive={archive}
      unarchive={unarchive}
      itemId={itemId}
    >
      {({ context }) => (
        <>
          <ReactFormError />
          <ReactFormFields>
            {({ values, dirtyValues }) => (
              <ReactFormField name="name">
                {({ field, label, error }) => (
                  <>
                    <label>{label}</label>
                    <input type="text" {...field} />
                    {error && <p>Error: {error.message || error}</p>}
                  </>
                )}
              </ReactFormField>
            )}
          </ReactFormFields>

          <ReactFormCreate />
          <ReactFormUpdate />
          <ReactFormArchive />
          <ReactFormUnarchive />
          <ReactFormDelete />
        </>
      )}
    </ReactForm>
  );
}

TIP

ReactForm does not render your UI. It only gives you the data and state you need — your components stay 100% in control of layout and design.

Let's break down what ReactForm offers - configuration options, the components, and props that power your CRUD.