react-editable-list

List with edit, add, delete (and maybe dnd reorder) capabilities for React

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-editable-list
0.0.34 years ago4 years agoMinified + gzip package size for react-editable-list in KB

Readme

react-editable-list == ReactEditableList React component --

Background

This component generates a list of editable values, with add and remove capabilities. At some point it may support reordering.

Installation and Usage

npm install --save-dev react-editable-list
In your react code:
import ReactEditableList from 'react-editable-list'
 . . . 
  onListUpdated(list) {
    console.log("Got updated list:", list)
  }
  
  render() {
    return this.props.list &&
      <ReactEditableList list={this.props.list} onListUpdated={this.onListUpdated} /> 
  }
The "onListUpdated" is called each time a list item has been updated or removed. Adding a new item will not call "onListUpdated".

Styling

Styling is left up to your imagination and creativity. By default, the layout is awful: unstyled
However with a bit of styling (see below), you can make it very presentable: styled
The above was created by using "add" and "delete" icons, and applying the following styles:
.react-editable-list {
  font-size: 14px;
  list-style: none;
  padding: 0;
}
.react-editable-list-item-value {
  width: 200px;
  display: inline-block;
  padding-bottom: 5px;
}
.react-editable-list-item-value input {
  width: 190px;
}
.react-editable-list-delete-button {
  background-image: url(/public/images/icons/delete.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 24px;
  width: 24px;
  border: none;
  font-size: 0px;
}
.react-editable-list-add-button {
  background-image: url(/public/images/icons/add.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 24px;
  width: 24px;
  border: none;
  font-size: 0px;
  margin-left: 200px;
  margin-top: 5px;
}