Skip to main content

useSortableBoard Experimental

Board-level coordinator hook for cross-container item transfers. Returns a SortableBoardHandle that you pass to SortableBoardContainer.

Import​

import { useSortableBoard } from 'react-native-drax';

Usage​

const board = useSortableBoard({
  keyExtractor: (item) => item.id,
  onTransfer: ({ item, fromContainerId, toContainerId, fromIndex, toIndex }) => {
    // Move item between columns in your state
  },
});

Options​

OptionTypeDescription
keyExtractor(item: TItem) => stringUnique key per item (must be globally unique across all columns)
onTransfer(event: SortableBoardTransferEvent<TItem>) => voidCalled when an item is transferred between columns

Transfer Event​

interface SortableBoardTransferEvent<TItem> {
  item: TItem;           // The transferred item
  fromContainerId: string;  // Source column id
  fromIndex: number;        // Original index in source
  toContainerId: string;    // Target column id
  toIndex: number;          // Insertion index in target
}

Return Value: SortableBoardHandle<TItem>​

Pass this handle to SortableBoardContainer:

<SortableBoardContainer board={board}>
  {/* Column components */}
</SortableBoardContainer>