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

Getting started

Examples

Last modified 2yr ago

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

Props

🆒 Props

​