The initial value of the Editable in both edit & preview mode
Editable
EditableText is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it.
Props#
Editable Props#
defaultValue
defaultValue
string
isDisabled
isDisabled
If true
, the Editable will be disabled.
boolean
isPreviewFocusable
isPreviewFocusable
If true
, the read only view, has a tabIndex
set to 0
so it can receive focus via the keyboard or click.
boolean
true
onCancel
onCancel
Callback invoked when user cancels input with the Esc
key.
It provides the last confirmed value as argument.
(previousValue: string) => void
onChange
onChange
Callback invoked when user changes input.
(nextValue: string) => void
onEdit
onEdit
Callback invoked once the user enters edit mode.
() => void
onSubmit
onSubmit
Callback invoked when user confirms value with enter
key or by blurring input.
(nextValue: string) => void
placeholder
placeholder
The placeholder text when the value is empty.
string
selectAllOnFocus
selectAllOnFocus
If true
, the input's text will be highlighted on focus.
boolean
true
startWithEditView
startWithEditView
If true
, the Editable will start with edit mode by default.
boolean
submitOnBlur
submitOnBlur
If true
, it'll update the value onBlur and turn off the edit mode.
boolean
true
value
value
The value of the Editable in both edit & preview mode
string
Props#
Editable Props#
defaultValue
defaultValue
The initial value of the Editable in both edit & preview mode
string
isDisabled
isDisabled
If true
, the Editable will be disabled.
boolean
isPreviewFocusable
isPreviewFocusable
If true
, the read only view, has a tabIndex
set to 0
so it can receive focus via the keyboard or click.
boolean
true
onCancel
onCancel
Callback invoked when user cancels input with the Esc
key.
It provides the last confirmed value as argument.
(previousValue: string) => void
onChange
onChange
Callback invoked when user changes input.
(nextValue: string) => void
onEdit
onEdit
Callback invoked once the user enters edit mode.
() => void
onSubmit
onSubmit
Callback invoked when user confirms value with enter
key or by blurring input.
(nextValue: string) => void
placeholder
placeholder
The placeholder text when the value is empty.
string
selectAllOnFocus
selectAllOnFocus
If true
, the input's text will be highlighted on focus.
boolean
true
startWithEditView
startWithEditView
If true
, the Editable will start with edit mode by default.
boolean
submitOnBlur
submitOnBlur
If true
, it'll update the value onBlur and turn off the edit mode.
boolean
true
value
value
The value of the Editable in both edit & preview mode
string