Components

ReactForm is a headless package - which means it handles all the CRUD logic, state management, and API plumbing for you, but doesn't render any UI by default.

Instead, it gives you a set of composable components that expose useful state and behaviors. You can place them anywhere in your layout, wrap them in custom UI, or completely style them your way.

Example

App.jsx

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

function App() {
  return (
    <ReactForm>
      {({ context }) => (
        <>
          <ReactFormError />
          <ReactFormFields>
            <ReactFormField name="email">
              {({ field, label, error }) => (
                <>
                  <label>{label}</label>
                  <input type="email" {...field} />
                  {error && <span>{error.message || error}</span>}
                </>
              )}
            </ReactFormField>
            <ReactFormField name="name">
              {({ field, label, error }) => (
                <>
                  <label>{label}</label>
                  <input type="text" {...field} />
                  {error && <span>{error.message || error}</span>}
                </>
              )}
            </ReactFormField>
          </ReactFormFields>

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

Notes

• <ReactForm> must be the root component to manage the form context.
• All child components consume the internal state automatically - no need to pass props.
• You can wrap child components with custom markup, layouts, or UI frameworks like Tailwind, Material-UI, etc.
• You don't have to use every child component - use only what you need.

Know more about the components, their props and render props in next section.