<ReactFormCreate>

Renders a create button that calls the create method on click. The button is automatically visible only in create mode (when creating a new item) and hidden in update mode (when editing an existing item).

<ReactForm>
  {({ context }) => (
    <ReactFormCreate>
      {({ createItem, isCreating, isReading, isLoading, resetForm }) => (
        <div>
          <button onClick={createItem} disabled={isLoading}>
            {isCreating ? "Creating..." : "Create"}
          </button>
          <button
            onClick={() => createItem().then(() => resetForm())}
            disabled={isLoading}
          >
            {isCreating ? "Creating..." : "Save & create another"}
          </button>
        </div>
      )}
    </ReactFormCreate>
  )}
</ReactForm>

Render Props

createItem

• Type: Function

Wrapper function for calling the create method. Call this function when the button is clicked.

isCreating

• Type: Boolean

true while the create operation is in progress.

isReading

• Type: Boolean

true while the read operation is in progress (when loading existing data).

isLoading

• Type: Boolean

true when any async operation is in progress (reading, creating, updating, deleting, or archiving).

resetForm

• Type: Function

Call the function createItem().then(() => resetForm()) when you want to save & create another

Default Behavior

If no render prop is provided, <ReactFormCreate> renders a default button with loading states.

// Default button
<ReactFormCreate />

// Custom button
<ReactFormCreate>
  {({ createItem, isCreating, isLoading }) => (
    <button
      onClick={createItem}
      disabled={isLoading}
      className="btn-primary"
    >
      {isCreating ? "Saving..." : "Save New Item"}
    </button>
  )}
</ReactFormCreate>

Example

<ReactForm schema={schema} create={create} itemId={itemId}>
  {({ context }) => (
    <>
      <ReactFormFields>{/* Fields */}</ReactFormFields>

      <ReactFormCreate>
        {({ createItem, isCreating, isLoading }) => (
          <button onClick={createItem} disabled={isLoading}>
            {isCreating ? "Creating..." : "Create"}
          </button>
        )}
      </ReactFormCreate>
    </>
  )}
</ReactForm>