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

​