react-easy-edit
Search…
⌃K

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
​

​

​