react-easy-edit
Version:
A react library for inline editing components
98 lines (80 loc) • 7.82 kB
Markdown
[](https://www.npmjs.com/package/react-easy-edit)
[](https://opensource.org/licenses/MIT)
[](https://circleci.com/gh/giorgosart/react-easy-edit) [](https://greenkeeper.io/)
A React library that allows inline editing on HTML5 input components.
If you would like to see what the next release looks like, visit our [Dev](https://github.com/giorgosart/react-easy-edit/projects/15) project :rocket:
- Supports `input` (most types, even inputs with `datalist`), `textarea`,`radio`, `checkbox` and `select` HTML types
- Validates user input
- Allows customisation on all elements including the save and cancel buttons
- Supports custom editComponent and customPlaceholder for each type
| Prop | Type | Required | Default | Description |
|-------------------|---------------------------|----------|-----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| type | string | Yes | | The type of the input element to display. Supported types are `text`, `number`, `color`, `textarea`, `date`, `datetime-local`,`time`, `month`, `week`, `radio`, `checkbox`, `select`, `range` and `datalist`|
| value | string or number or array | No | null | The value of the input element depended on its type |
| options | array | No | | A key value pair object that is used as available options for select, radio and checkbox.``` options = [{label:'Test One', value: '1'},{label:'Test Two', value: '2'}]; ``` |
| saveButtonLabel | string | 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 | 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 |
| 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 <kbd>Esc</kbd> button is pressed |
| onSave | function | Yes | | A function that will be called when editing is saved. Also called when the <kbd>Enter</kbd> button is pressed (Textarea component is excluded) |
| onValidate | function | No | () => {} | 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 |
| validationMessage | string | No | | 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 |
| instructions | string | No | | Instructions to be shown below the component |
| 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 |
| placeholderComponent | element | No | null | The custom component to be displayed the value when not editing |
```npm i react-easy-edit``` or ```yarn add react-easy-edit```
A simple example
```
import React, { Component } from 'react';
import EasyEdit from 'react-easy-edit';
export default class App extends Component {
const attributes = {
name: 'name-two',
id: 'name-two',
disabled: true
};
render() {
return (
<EasyEdit
type="text"
onSave={() => {}}
onValidate={() => true}
attributes={attributes}
/>
);
}
}
```
When using custom input component they must be definted as components in the props, like so:
```
<EasyEdit
type="text"
onSave={() => {}}
editComponent={<CustomInput />}
placeholderComponent={<CustomPlaceholder />}
/>
```
When defining a custom input component, the function ```setParentValue``` is injected into your custom component, which must be called in order to pass the desired value up to the parent ```EasyEdit``` component.
For example, if your component was a text field that needed to set the ```EasyEdit``` value as a user id based on a username entered, you would need to pass the id to ```this.props.setParentValue``` in order to get that value to the ```EasyEdit``` component.
e.g.
```
// Inside your custom input
onChange(searchTerm) {
getUserIdByUsername(searchTerm).then((userId) => {
this.props.setParentValue(userId);
})
}
```
react-easy-edit is an open source library licensed under MIT