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
defaultValueDescription
Type
stringfinalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>isDisabled
isDisabledDescription
If true, the Editable will be disabled.
Type
booleanisPreviewFocusable
isPreviewFocusableDescription
If true, the read only view, has a tabIndex set to 0
so it can receive focus via the keyboard or click.
Type
booleanDefault
trueonBlur
onBlurDescription
Callback invoked when the user either submits or cancels. It provides the last confirmed value as argument.
Type
(nextValue: string) => voidonCancel
onCancelDescription
Callback invoked when user cancels input with the Esc key.
It provides the last confirmed value as argument.
Type
(previousValue: string) => voidonChange
onChangeDescription
Callback invoked when user changes input.
Type
(nextValue: string) => voidonEdit
onEditDescription
Callback invoked once the user enters edit mode.
Type
() => voidonSubmit
onSubmitDescription
Callback invoked when user confirms value with enter key or by blurring input.
Type
(nextValue: string) => voidplaceholder
placeholderDescription
The placeholder text when the value is empty.
Type
stringselectAllOnFocus
selectAllOnFocusDescription
If true, the input's text will be highlighted on focus.
Type
booleanDefault
truestartWithEditView
startWithEditViewDescription
If true, the Editable will start with edit mode by default.
Type
booleansubmitOnBlur
submitOnBlurDescription
If true, it'll update the value onBlur and turn off the edit mode.
Type
booleanDefault
truevalue
valueDescription
The value of the Editable in both edit & preview mode
Type
stringProps#
Editable Props#
defaultValue
defaultValueDescription
The initial value of the Editable in both edit & preview mode
Type
stringfinalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>isDisabled
isDisabledDescription
If true, the Editable will be disabled.
Type
booleanisPreviewFocusable
isPreviewFocusableDescription
If true, the read only view, has a tabIndex set to 0
so it can receive focus via the keyboard or click.
Type
booleanDefault
trueonBlur
onBlurDescription
Callback invoked when the user either submits or cancels. It provides the last confirmed value as argument.
Type
(nextValue: string) => voidonCancel
onCancelDescription
Callback invoked when user cancels input with the Esc key.
It provides the last confirmed value as argument.
Type
(previousValue: string) => voidonChange
onChangeDescription
Callback invoked when user changes input.
Type
(nextValue: string) => voidonEdit
onEditDescription
Callback invoked once the user enters edit mode.
Type
() => voidonSubmit
onSubmitDescription
Callback invoked when user confirms value with enter key or by blurring input.
Type
(nextValue: string) => voidplaceholder
placeholderDescription
The placeholder text when the value is empty.
Type
stringselectAllOnFocus
selectAllOnFocusDescription
If true, the input's text will be highlighted on focus.
Type
booleanDefault
truestartWithEditView
startWithEditViewDescription
If true, the Editable will start with edit mode by default.
Type
booleansubmitOnBlur
submitOnBlurDescription
If true, it'll update the value onBlur and turn off the edit mode.
Type
booleanDefault
truevalue
valueDescription
The value of the Editable in both edit & preview mode
Type
string