# Props ### 🆒 Props | `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 | | `editButtonLabel` | String or Element | No | Edit | | | `editButtonStyle` | String | No | easy-edit-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 | | `editable` | Boolean | No | true | Determines whether the component itself should be editable or not | | `inputAttributes` | 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 | | `hideEditButton` | Boolean | No | true | | | `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 | | `isEditing` | Boolean | No | false | Toggles between the view and edit modes | | `showEditViewButtonsOnHover` | Boolean | No | false | | | `showViewButtonsOnHover` | Boolean | No | false | | ### --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://giorgosart.gitbook.io/react-easy-edit/props.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.