useInlineEdit

Manages inline editing state with keyboard shortcuts and async save.

Signature

function useInlineEdit<T>(
  options: UseInlineEditOptions<T>
): UseInlineEditReturn<T>

Parameters

UseInlineEditOptions<T>

Property	Type	Default	Description
initialValue	T	Required	Initial value
onSave	(value: T) => Promise<void> | void	-	Save function
onCancel	() => void	-	Called when edit is cancelled
onSaveSuccess	() => void	-	Called when save succeeds
onSaveError	(error: Error) => void	-	Called when save fails
enableKeyboardShortcuts	boolean	true	Enable Enter/Escape shortcuts

Return Type

UseInlineEditReturn<T>

Property	Type	Description
isEditing	boolean	Whether in edit mode
draft	T	Current draft value
originalValue	T	Value before editing
isSaving	boolean	Whether save is in progress
saveError	Error | null	Error from last save attempt
startEdit	() => void	Enter edit mode
cancelEdit	() => void	Cancel and revert
saveEdit	() => Promise<void>	Save current draft
setDraft	(value: T | ((prev: T) => T)) => void	Update draft value
setOriginalValue	(value: T) => void	Update original value
inputProps	{ onKeyDown: (e: KeyboardEvent) => void }	Props for input element

Keyboard Shortcuts

Key	Action
Enter	Save (when input focused)
Escape	Cancel (when input focused)

Example

const edit = useInlineEdit({
  initialValue: 'Hello',
  onSave: async (value) => api.update({ name: value }),
})

if (edit.isEditing) {
  return <input value={edit.draft} onChange={(e) => edit.setDraft(e.target.value)} {...edit.inputProps} />
}
return <span onClick={edit.startEdit}>{edit.originalValue}</span>

See also

• useInlineEdit (Conceptual)
• Inline Editing Pattern
• InlineEditable Component