Props
A full list of props that the EasyEdit component accepts

🆒 Props

Prop
Type
Required
Default
Description
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
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
allowEdit
Boolean
No
true
Determines whether the component itself should be editable or not
attributes
Object
No
{}
A key value pair of HTML attributes to be applied on the element when the component is in Edit mode

Copy link
Contents
🆒 Props