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
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
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
editMode	Boolean	No	false	Toggles between the view and edit modes
showEditViewButtonsOnHover	Boolean	No	false
showViewButtonsOnHover	Boolean	No	false