For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/ui/components/sortable.md.
lynx-ui logo
lynx-ui
  • English

      • <Sortable>

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

      Basic Usage

      lynx-ui-sortableBasic/index.tsx
      Code
      Preview

      Drag Without a boundary

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

      lynx-ui-sortableNoBoundary/index.tsx
      Code
      Preview

      Disable all dragging and sorting behavior

      lynx-ui-sortableDisableSorting/index.tsx
      Code
      Preview

      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

      as
      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.
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.