# 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                        |                                                                                                                                                                 |

###