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
​
​
​

Getting started

Examples

Last modified 1mo ago

`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

Props

🆒 Props

​