Migration Guide from v1 to v.2.1

Migration from v1.x to v.2.x shouldn't be difficult and should take under 10 minutes.

Three sections: State, Options and hooks.

Notes

• All components must be controlled using react state.

State

With the old version you used to have to:

• Get the order of elements from the onChange callback.
• Rearrange your state, usually by calling [].sort().
• call setState() to update the state.

// example from old — state

The new way is to:

• Add state as the list prop.
• Add a callback to the setList which holds the newly transformed state as an argument.

// example from new — state

Options

Options used to be a prop on the react-sortable component.

// example from old — options

Now each property of Options is a prop. You can still separate your options if you wish and then merge the props.

// example from new — options

Hooks

My favourite addition to this component is hooks.

We used to have no other choice but use a component as the container for the list that contains sortable items.

// example from old — component

Now we can use a hook that takes 2 object parameters.

The first argument contains properties that affect state: list, setList and clone.

The second are the Sortable options.

// example from new — hooks