InlineEditable

Headless component for inline editing with render props.

Props

InlineEditableProps<T>

Prop	Type	Required	Description
value	T	Yes	Current value
onSave	(value: T) => Promise<void> | void	Yes	Save function
renderDisplay	(props: DisplayProps<T>) => ReactNode	Yes	Render display mode
renderEditor	(props: EditorProps<T>) => ReactNode	Yes	Render edit mode
onCancel	() => void	No	Called when edit cancelled
onSaveSuccess	() => void	No	Called when save succeeds
onSaveError	(error: Error) => void	No	Called when save fails
enableKeyboardShortcuts	boolean	No	Enable Enter/Escape (default: true)
className	string	No	Wrapper class

InlineEditableDisplayProps<T>

Property	Type	Description
value	T	Current value
onStartEdit	() => void	Start editing

InlineEditableEditorProps<T>

Property	Type	Description
value	T	Current draft value
onChange	(value: T) => void	Update draft
onSave	() => void	Save current value
onCancel	() => void	Cancel editing
isSaving	boolean	Whether save is in progress
error	Error | null	Error from save attempt
inputProps	{ onKeyDown: (e: KeyboardEvent) => void }	Props for input

Example

<InlineEditable
  value={item.name}
  onSave={async (value) => api.update({ name: value })}
  renderDisplay={({ value, onStartEdit }) => (
    <span onClick={onStartEdit}>{value}</span>
  )}
  renderEditor={({ value, onChange, onSave, onCancel, inputProps }) => (
    <input value={value} onChange={(e) => onChange(e.target.value)} {...inputProps} />
  )}
/>

See also

• InlineEditable (Conceptual)
• useInlineEdit Hook