Props

react-easy-edit
Search…
Getting started
Props
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
​
​
​
Getting started
Examples
Last modified 1yr ago
Copy link
Contents
🆒 Props
🆒 Props

​
