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