📖Props
A full list of props that the EasyEdit component accepts
🆒 Props
type
String
Yes
N/A
The type of the input element to display.
value
String, Number or Array
No
null
The value of the input element depended on its type
options
Array
No
null
An array of key value pair objects that are used as options for select, datalist, radio and checkbox types.
saveButtonLabel
String or Element
No
Save
The label to be used for the "Save" button
saveButtonStyle
String
No
easy-edit-button
One or more CSS classes to be used to style the "Save" button
cancelButtonLabel
String or Element
No
Cancel
The label to be used for the "Cancel" button
cancelButtonStyle
String
No
easy-edit-button
One or more CSS classes to be used to style the "Cancel" button
deleteButtonLabel
String or Element
No
Delete
The label to be used for the "Delete" button
deleteButtonStyle
String
No
easy-edit-button
One or more CSS classes to be used to style the "Delete" button
editButtonLabel
String or Element
No
Edit
editButtonStyle
String
No
easy-edit-button
buttonsPosition
String
No
after
The position for both save and cancel buttons, accepts before and after
placeholder
String
No
Click to edit
The text to be shown as a hint that describes the expected value of the input element
onCancel
Function
No
() => {}
A function that will be called when editing is cancelled. Also called when the Esc button is pressed
onSave
Function
Yes
N/A
A function that will be called when editing is saved. Also called when the Enter button is pressed (for Textarea component it's Ctrl + Enter)
onValidate
Function
No
value => true
A function that will be called before the onSave() event. It must return true or false and has one parameter which is the value of the component being edited
onFocus
Function
No
() => {}
A function that will be called when the onFocus HTML event is triggered
onBlur
Function
No
() => {}
A function that will be called when the onBlur HTML event is triggered
validationMessage
String
No
Please provide a valid value
The text to be displayed if validation fails
editable
Boolean
No
true
Determines whether the component itself should be editable or not
inputAttributes
Object
No
{}
A key value pair of HTML attributes to be applied on the element when the component is in Edit mode
viewAttributes
Object
No
{}
A key value pair of HTML attributes to be applied on the element when the component is in View mode
instructions
String
No
null
Instructions to be shown below the component
disableAutoSubmit
Boolean
No
false
Whether the component can be auto submitted when the user hits the Enter key
disableAutoCancel
Boolean
No
false
Whether the component can be auto cancelled when the user hits the Esc key
editComponent
Element
No
null
The custom component to be displayed when editing the value. This will override the standard input shown for the type provided
displayComponent
Element
No
null
The custom component to be displayed the value when not editing
cssClassPrefix
String
No
''
A prefix to be appended to all the EasyEdit default CSS classes, can be used to also reset the style of a specific EasyEdit component
hideSaveButton
Boolean
No
false
Whether the save button should be shown or not, set to true if submitOnBlur is enabled
hideCancelButton
Boolean
No
false
Whether the cancel button should be shown or not, set to true if submitOnBlur is enabled
hideDeleteButton
Boolean
No
true
Whether the delete button should be shown or not, hidden by default
hideEditButton
Boolean
No
true
onHoverCssClass
String
No
easy-edit-hover-on
The CSS class to be used while the mouse cursor is on top of the component
saveOnBlur
Boolean
No
false
Auto submits the component when the onBlur event is triggered
cancelOnBlur
Boolean
No
false
Cancels the component when the onBlur event is triggered
isEditing
Boolean
No
false
Toggles between the view and edit modes
showEditViewButtonsOnHover
Boolean
No
false
showViewButtonsOnHover
Boolean
No
false
Last updated