```js
const [list, setList] = React.useState(['Item 1', 'Item 2', 'Item 3']);

return (
  <SilkeSortableList items={list} onSort={setList}>
    {(item) => item}
  </SilkeSortableList>
);
```

### Only sort on over and custom drag handle

To set custom drag handle, just add **data-drag-handle** to the item which should be the drag handle

```js
const [list, setList] = React.useState(['Item 1', 'Item 2', 'Item 3']);

return (
  <SilkeSortableList items={list} triggerState="over" onSort={setList}>
    {(item) => (
      <SilkeBox gap="s" vAlign="center" height="base">
        <SilkeIcon icon="drag" data-drag-handle /> {item}
      </SilkeBox>
    )}
  </SilkeSortableList>
);
```

### Sort between lists

To sort between lists just give the list the same id

```js
const [list1, setList1] = React.useState(['Item 1', 'Item 2', 'Item 3']);
const [list2, setList2] = React.useState(['Item 4', 'Item 5', 'Item 6']);
const Item = (item) => (
  <SilkeBox gap="s" vAlign="center" height="base">
    <SilkeIcon icon="drag" data-drag-handle /> {item}
  </SilkeBox>
);
<SilkeBox gap="xl">
  <SilkeSortableList listId="between" items={list1} flex pad="m" bg="neutral-20" onSort={setList1}>
    {Item}
  </SilkeSortableList>
  <SilkeSortableList listId="between" items={list2} flex pad="m" bg="neutral-20" onSort={setList2}>
    {Item}
  </SilkeSortableList>
</SilkeBox>;
```

### Nested sortable

To sort between lists just give the list the same id

```js
const [selected, setSelected] = React.useState(['item1']);
const [collapsed, setCollapsed] = React.useState(['item2']);
const [list, setList] = React.useState([
  {
    key: 'header',
    value: 'Header item',
    disabled: true,
    render: (item) => (
      <SilkeBox vAlign="center" height="base">
        {item.value}
      </SilkeBox>
    ),
    children: ['item1-1', 'item1-2', 'item1-3', 'item1-4'],
  },
  {
    key: 'item1-1',
    value: 'Item 1.1',
    children: ['item1-1-1', 'item1-1-2'],
  },
  { key: 'item1-2', value: 'Item 1.2' },
  { key: 'item1-3', value: 'Item 1.3' },
  { key: 'item1-4', value: 'Item 1.4' },
  { key: 'item1-1-1', value: 'Item 1.1.1' },
  { key: 'item1-1-2', value: 'Item 1.1.2' },
  {
    key: 'item2',
    value: 'Item 2',
    children: ['item2-1', 'item2-2'],
  },
  {
    key: 'item2-1',
    value: 'Item 2.1',
    children: ['item2-2-1', 'item2-2-2', 'item2-2-3', 'item2-2-4'],
  },
  { key: 'item2-2', value: 'Item 2.2', children: [] },
  { key: 'item2-2-1', value: 'Item 2.2.1' },
  { key: 'item2-2-2', value: 'Item 2.2.2' },
  { key: 'item2-2-3', value: 'Item 2,2.3' },
  { key: 'item2-2-4', value: 'Item 2.2.4' },
]);
const Item = (item) => (
  <SilkeBox gap="xs" vAlign="center" height="base">
    <SilkeBox size="xs" align="center">
      <SilkeIcon icon="package" />
    </SilkeBox>
    {item.value}
  </SilkeBox>
);
<SilkeBox gap="xl">
  <SilkeNestedSortableList
    selected={selected}
    collapsed={(item) => collapsed[item.key]}
    items={list}
    flex
    pad="m"
    onSort={setList}
    onCollapse={(item, collapse) => {
      setCollapsed({ ...collapsed, [item.key]: collapse });
    }}
    onItemClick={(e, item) => {
      if (e.shiftKey) setSelected([...selected, item.key]);
      else setSelected([item.key]);
    }}
    canHaveChildren={(item) => item.children || item.key === 'item1-4'}
    canSort={(parent, childIndex, parents, selected) => {
      // Don't allow to place in the root(no parent) and not in item 2
      return !!parent && !parents.includes('item2');
    }}
    onSort={setList}
  >
    {Item}
  </SilkeNestedSortableList>
</SilkeBox>;
```