Props
A full list of props that the EasyEdit component accepts
🆒 Props
| String | Yes | N/A | The type of the input element to display. |
| String, Number or Array | No | null | The value of the input element depended on its type |
| Array | No | null | An array of key value pair objects that are used as options for select, datalist, radio and checkbox types. |
| String or Element | No | Save | The label to be used for the "Save" button |
| String | No | easy-edit-button | One or more CSS classes to be used to style the "Save" button |
| String or Element | No | Cancel | The label to be used for the "Cancel" button |
| String | No | easy-edit-button | One or more CSS classes to be used to style the "Cancel" button |
| String or Element | No | Delete | The label to be used for the "Delete" button |
| String | No | easy-edit-button | One or more CSS classes to be used to style the "Delete" button |
| String or Element | No | Edit | |
| String | No | easy-edit-button | |
| String | No | after | The position for both save and cancel buttons, accepts |
| String | No | Click to edit | The text to be shown as a hint that describes the expected value of the input element |
| Function | No | () => {} | A function that will be called when editing is cancelled. Also called when the |
| Function | Yes | N/A | A function that will be called when editing is saved. Also called when the |
| Function | No | value => true | A function that will be called before the |
onFocus | Function | No | () => {} | A function that will be called when the |
| Function | No | () => {} | A function that will be called when the |
| String | No | Please provide a valid value | The text to be displayed if validation fails |
| Boolean | No | true | Determines whether the component itself should be editable or not |
| Object | No | {} | A key value pair of HTML attributes to be applied on the element when the component is in Edit mode |
| Object | No | {} | A key value pair of HTML attributes to be applied on the element when the component is in View mode |
| String | No | null | Instructions to be shown below the component |
| Boolean | No | false | Whether the component can be auto submitted when the user hits the |
| Boolean | No | false | Whether the component can be auto cancelled when the user hits the |
| Element | No | null | The custom component to be displayed when editing the value. This will override the standard input shown for the |
| Element | No | null | The custom component to be displayed the value when not editing |
| String | No | '' | A prefix to be appended to all the |
| Boolean | No | false | Whether the save button should be shown or not, set to true if submitOnBlur is enabled |
| Boolean | No | false | Whether the cancel button should be shown or not, set to true if submitOnBlur is enabled |
| Boolean | No | true | Whether the delete button should be shown or not, hidden by default |
| Boolean | No | true | |
| String | No | easy-edit-hover-on | The CSS class to be used while the mouse cursor is on top of the component |
| Boolean | No | false | Auto submits the component when the |
| Boolean | No | false | Cancels the component when the |
| Boolean | No | false | Toggles between the view and edit modes |
| Boolean | No | false | |
| Boolean | No | false |
Last updated