`<Sortable>`

A headless Sortable list component for ReactLynx. It provides list reordering primitives via main-thread animations.

Basic Usage

Drag Without a boundary

If no boundaryId is provided, the SortableItem can be dragged freely without restrictions.

Disable all dragging and sorting behavior

Structure

The whole SortableItem is draggable.

 <SortableRoot data={data}>
    {(item: SortableData<string>) => {
      return (
        <SortableItem />
      )
    }}
 </SortableRoot>

Only the SortableItemArea is draggable.

 <SortableRoot data={data}>
    {(item: SortableData<string>) => {
      return (
        <SortableItem as='DraggableRoot' >
          <SortableItemArea />
        </SortableItem>
      )
    }}
 </SortableRoot>

API

SortableRootProps

boundaryId

iOS

Android

Harmony

Typestring

The unique key of the item that acts as the boundary. If the item is dragged out of the boundary, the sorting will be canceled.

children

iOS

Android

Harmony

Type(item: {dataItem: T, getSortingKey: () => string}) => ReactNode

Children, which is a function that receives an item and returns a ReactNode.

data

iOS

Android

Harmony

TypeSortableData[]

The data for the sortable list.

debugLog

iOS

Android

Harmony

Typeboolean·Defaultfalse

Display debug logs. Open it when you find a bug.

enableSorting

iOS

Android

Harmony

Typeboolean·Defaulttrue

Whether to enable sorting.

onSortEnd

iOS

Android

Harmony

Type(sortedData: SortableData[]) => void

Callback function that is triggered when sorting ends. The parameter is the sorted data.

onSortStart

iOS

Android

Harmony

Type() => void

Callback function that is triggered when sorting starts.

SortableItemProps

iOS

Android

Harmony

TypeDraggable | DraggableRoot·Default'Draggable'

Specifies the underlying component to be used.

children

iOS

Android

Harmony

TypeReactNode

Children.

className

iOS

Android

Harmony

Typestring

className

sortingKey

iOS

Android

Harmony

Typestring

The unique key for sorting.

SortableData

dataItem

iOS

Android

Harmony

TypeT

The original data item.

getSortingKey

iOS

Android

Harmony

Type() => string

A function that returns the unique key for sorting.

#<Sortable>

#Basic Usage

#Drag Without a boundary

#Disable all dragging and sorting behavior

#Structure

#API

#SortableRootProps

#SortableItemProps

#SortableData

`<Sortable>`

Basic Usage

Drag Without a boundary

Disable all dragging and sorting behavior

Structure

API

SortableRootProps

SortableItemProps

SortableData