useListFormContext

@spartanfx/react v1.2.2

---

@spartanfx/react / spfx / useListFormContext

Function: useListFormContext()

function useListFormContext(config?): IListFormContext;

Custom React hook to initialize or consume a List Form context within an SPFx environment.

When called with a configuration object, it creates a new context instance and manages:

• SharePoint list metadata
• List item loading (new or existing)
• Field schema and state mapping
• Validation state and error messages
• Attachment management
• Data binding via formState helpers
• Saving list item back to SharePoint

When called with no parameters, it consumes the context from a parent <ListFormContext.Provider>.

Configuration

Required

Property	Type	Description
listName	string	The display name of the SharePoint list.
sp	SPFI	PnPjs SPFI instance used for SharePoint REST API operations.
webPartContext	WebPartContext	SPFx WebPart context, typically passed from the WebPart class.

Options

Property	Type	Description
disabled?	boolean	If true, disables all controls in the form. The context's disabled flag will reflect this.
itemId?	number	ID of the SharePoint list item to load into the form. Optional render the form in "new item" mode if null or undefined.
readonly?	boolean	If true, renders the form in readonly mode (visually editable, but no actions are allowed). Unlike disabled, fields are not grayed out and can still be visually interacted with.

Events & callbacks

Property	Type	Description
onInit?	(listFormContext) => void | Promise<void>	Lifecycle hook called once before the form is shown. Use this to pre-fill form state or run initialization logic. If a Promise is returned, rendering will be delayed until the Promise resolves.
translate?	(text) => string	Optional translation function for localizing UI text strings. If not provided, raw text values will be used.

Full type reference: IListFormConfig

Returns

IListFormContext

An instance of IListFormContext providing access to form state, validation, and persistence APIs.

Throws

Error if no config is passed and no parent context is available.

Examples

Initializing the listFormContext

const ctx = useListFormContext({
  sp,
  listName: 'Projects',
  itemId: 5,
  webPartContext,
  onInit: async (ctx) => {
    ctx.formState.setText('Title', 'Initial Value');
  }
});

Consuming the list formContext

useListFormContext()