Migration Guide from v0.x to v.1.x

Usage

v0.x

Here is an example of controlled component that was used in v0.x:

import React from 'react';
import Sortable from 'react-sortablejs';

class SortableList extends React.Component {
    state = {
        items: [1, 2, 3, 4, 5, 6]
    };

    handleStart(evt) { // Dragging started
    }
    handleEnd(evt) { // Dragging ended
    }
    handleAdd(evt) { // Element is dropped into the list from another list
    }
    handleUpdate(evt) { // Changed sorting within list
    }
    handleRemove(evt) { // Element is removed from the list into another list
    }
    handleSort(evt) { // Called by any change to the list (add / update / remove)
    }
    handleFilter(evt) { // Attempt to drag a filtered element
    }
    handleMove(evt) { // Event when you move an item in the list or between lists
    }
    render() {
        const items = this.state.items.map((val, index) => (
            <li key={index}>List Item: {val}</li>
        ));

        return (
            <ul ref="list">{items}</ul>
        );
    }
}

const sortableOptions = {
    ref: 'list',
    model: 'items'
};
export default Sortable(sortableOptions)(SortableList);

v1.0

From the v1 release, you can use the onChange method to manage state for a controlled component:

import React from 'react';
import Sortable from 'react-sortablejs';

class SortableList extends React.Component {
    state = {
        items: [1, 2, 3, 4, 5, 6]
    };

    sortable = null;

    render() {
        const listItems = items.map((val, key) => (
            <li key={key} data-id={val}>List Item: {val}</li>
        ));
        const options = {
            // See Sortable options at https://github.com/RubaXa/Sortable#options
        };

        return (
            <Sortable
                // Sortable options
                options={options}

                // [Optional] Use ref to get the sortable instance
                ref={(c) => {
                    if (c) {
                        this.sortable = c.sortable;
                    }
                }}

                // [Optional] A tag to specify the wrapping element. Defaults to "div".
                tag="ul"

                // The onChange method is necessary for a Controlled Component
                onChange={(order, sortable) => {
                    this.setState({ items: order });
                }}
            >
                {listItems}
            </Sortable>
        );
    }
}

export default SortableList;

Alternatively, you can write a simple functional component if you don't need to manage state:

import React from 'react';
import Sortable from 'react-sortablejs';

// Functional Component
const SortableList = ({ items }) => {
    const listItems = items.map((val, key) => (
        <li key={key} data-id={val}>List Item: {val}</li>
    ));
    const options = {
        // See Sortable options at https://github.com/RubaXa/Sortable#options
    };

    return (
        <Sortable
            options={options}
            tag="ul"
        >
            {listItems}
        </Sortable>
    );
};

export default SortableList;

If necessary, call a method (e.g. onChangeItems) passed from parent component to update latest changes:

import React from 'react';
import Sortable from 'react-sortablejs';

// Functional Component
const SortableList = ({ items, onChangeItems }) => {
    const listItems = items.map((val, key) => (
        <li key={key} data-id={val}>List Item: {val}</li>
    ));
    const options = {
        // See Sortable options at https://github.com/RubaXa/Sortable#options
    };

    return (
        <Sortable
            options={options}
            tag="ul"
            onChange={(order) => {
                onChangeItems(order);
            }}
        >
            {listItems}
        </Sortable>
    );
};

export default SortableList;