react-mutable-list

Mutable List

A draggable, droppable and deletable list component for React. It is still being actively developed, and bugs are still being found, so issues on github are welcome. Documentation is generated by react-docgen and can be found in the docs folder.

Installation

To install simply

npm install react-mutable-list

Functionality is exposed in three different ways: - es6/jsx files in src/ - es5 files with commonJS exports in lib/ - a prepackaged version with the entire react library under dist/list.js

Example

This example shows how the user might handle the onReorder and onRemove callbacks. The controller is responsible for managing the content passed into the list, and it uses the onReorder and onRemove callbacks to handle the corresponding events from the list.

import React from 'react'
import { List, ListItem } from 'react-mutable-list'
 
class Controller extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            items: ['hello', 'world']
        }
    }
 
    onReorder(from, to) {
        this.setState(state => {
            let tmp = state.items[from]
            state.items.splice(from, 1)
            state.items.splice(to, 0, tmp)
        })
    }
 
 
    onRemove(index) {
        this.setState(state => {
            state.items.splice(index, 1)
        })
    }
 
    reorder() {
        return (
            <List onReorder={(f, t) => this.onReorder(f, t)}>
            {this.state.items.map((item, i) => (
                <ListItem onRemove={e => this.onRemove(i)}>{item}</ListItem>
            ))}
            </List>
        )
    }
}

For a more involved example, see demo.jsx